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: 'create-next-app@14.2.15',
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.

From	To
content: []	content: ["./src/*/.{js,ts,jsx,tsx,mdx}"]

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.}

Setup TailwindCSS With Next.js