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