After learning about Tailwind CSS from Epic Web Conference, it piqued my curiosity so here I am trying to learn more about how it works. But first, we need to set it up.

There are probably a ton of installation tutorials out there but I want to document mine.

Installing TailwindCSS With Next.js

Create a new Next.js project

Start by creating a new Next.js project with this command.
I used tailwind-next as my project name. I added typescript because I want to use it in this project.

npx create-next-app@latest tailwind-next --typescript --eslint

It will show the following output:

Need to install the following packages:
  create-next-app@14.2.15
Ok to proceed? (y) y
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '[email protected]',
npm WARN EBADENGINE   required: { node: '>=18.17.0' },
npm WARN EBADENGINE   current: { node: 'v18.16.1', npm: '9.5.1' }
npm WARN EBADENGINE }
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … No

As of today, create-next-app is in version 14.2.15 which is the latest. We specified to use the latest when we invoked the command to install. You can change the version in here. For a list of available versions, always check the npm package.

You also have to select the answers to the questions. The answers you put here will matter. I retained my choices above.

When this shows, our directory is now ready!

Success! Created tailwind-next at /path/to/tailwind-next

Install and initialize Tailwind

Go to the directory and let's install and initialize Tailwind.

cd tailwind-next
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Update the config file.

Update the tailwind config file to include the paths. The filename should be tailwind.config.js.

Verify the tailwind directives are configured

Make sure the tailwind directives are in the globals.css file. In my case, it's found in src/app.

@tailwind base;
@tailwind components;
@tailwind utilities;

Run the project

Start the project.

npm run dev

In my case, after trying to start the project, I was prompted my version of Node.js is not compatible with the installed Next.js.

% npm run dev

> tailwind-next@0.1.0 dev
> next dev

You are using Node.js 18.16.1. For Next.js, Node.js version >= v18.17.0 is required.

So I had to install a new version. Good thing I'm using nvm so I confirmed the installed versions on my device and checked if I installed the v18.17.0.

% nvm list
         v4.0.0
       v16.20.1
       v18.16.0
->     v18.16.1

As expected, I don't have it so I had to install and switch to that version.

% nvm install 18.17.0
Downloading and installing node v18.17.0...
...
Now using node v18.17.0 (npm v9.6.7)

To verify if it's now using the intended version, I ran the node version check.

% node -v
v18.17.0

Now we're finally ready to meet the new project!

% npm run dev

> tailwind-next@0.1.0 dev
> next dev

  ▲ Next.js 14.2.15
  - Local:        http://localhost:3000

 ✓ Starting...
 ✓ Ready in 2.3s

Access the page in the browser

After accessing localhost, I'm greeted with the default page.

http://localhost:3000

Ready to work!

Start playing with the page.

I removed the code found in src/app/page.tsx and replaced it with the following code:

export default function Home() {
  return (
    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen">
      <main className="row-start-2 items-center">
        Hello world!
      </main>
    </div>
  );
}

I just want to replace the entire page with a Hello world! in the center. I'm still learning so I just experimented with the classNames and retained what I think works.

With this code, the page looks like this now:

PC mode:

Smartphone mode:

Sweet! Now I can start learning more about Tailwind from here!

Thanks for reading!
See you around! じゃあ、またね！

_{All photos are screenshots from my code unless stated otherwise.}