TailwindCSS v2 was recently released. Their release trailer was freaking amazing. They even got music composed especially for their trailer.
Now let's focus on how you can add TailwindCSS v2 to your new or existing Next.js project.
Creating a new Next.js project
npx create-next-app
This command will bootstrap a new Next.js project for you.
The package.json
should contain these scripts.
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
You can start the project by running
npm run dev
Adding TailwindCSS
npm install tailwindcss postcss autoprefixer
PostCSS v8 or up is required for Tailwind v2 to work. autoprefixer
is a PostCSS plugin. It adds vendor-specific prefixes to the compiled CSS like -webkit
, -ms
, etc.
Configuring PostCSS
Both tailwindcss
and autoprefixer
are postcss
plugins. To use them in our project, we first need to configure postcss and pass these two plugins to it.
Create a file named postcss.config.js
in the root of your project.
touch postcss.config.js
Now add this to the file.
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
Adding TailwindCSS styles
Now create a src/styles/tailwind.css
file and add the following to it.
@tailwind base;
@tailwind components;
@tailwind utilities;
The @tailwind
directive will inject the base
, components
, and utility
classes for us to use.
Now we have added TailwindCSS to our project. The only thing remaining is importing the styles globally. Doing so will let us use them from anywhere in our project.
To do that let import the tailwind.css
file into the pages/_app.js
file.
import '../src/styles/tailwind.css';
function App({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default App;
Restart your server after making changes to pages/_app.js
so the changes can reflect.
Now you are ready to use Tailwind v2 in your project. Let's try it now, shall we?
Remove everything from your pages/index.js
file and paste this there.
export default function Home() {
return (
<h1 className="text-4xl text-red-400 bg-gray-800 p-4 text-center">
TailwindCSS v2 with Next.js
</h1>
);
}
Configuring TailwindCSS defaults
To change the TailwindCSS defaults we first need to create a tailwind config file. Add it by running this command.
npx tailwindcss init
This will create tailwind.config.js
in the root of your project with following content,
module.exports = {
purge: [],
darkMode: false,
theme: {
extend: {},
},
variants: {},
plugins: [],
}
Thanks for reading and I hope this was helpful :)
Top comments (1)
Hi, thank you for this post!
Have you tried installing any plugins in this structure? I've been trying to install "@tailwindcss/custom-forms" plugin, everything good on the tailwind.config file from examples I've seen, but next.js seems to not include the plugin styles in the end. I don't know if there's any additional configuration needed in the postcss.config file or any other since I can't seem to find an example of the mix next.js+tailwindcss+plugins