Tailwind CSS is becaming very popular and it is very developer friendly utility-first CSS framework. If you haven’t used tailwindCSS before you can start looking their documentation.

Create your nextjs application first

npx create-next-app tailwind-demo

After you create your nextjs application we changed directory to the project

cd tailwind-demo

Setup required node modules for tailwind

yarn add tailwindcss yarn add -D postcss postcss-preset-env

After successfully installed required packages now we can create required configuration files.

There are 2 configuration files we need to add our project.

  • tailwind.config.js
  • postcss.config.js

Tailwind configurations will be created after running this command as below.

npx tailwindcss init -p

Tailwind configuration file used for configuring your styles in the project.

// tailwind.config.jsmodule.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}

You can access configuration options from official documentation of tailwindCSS

https://tailwindcss.com/docs/configuration

// postcss.config.jsmodule.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

After created configuration files we can skip next section.

In tailwind.config.js there is an purge option which we will use for selecting required paths for production build and unused stylings would not be added.

// tailwind.config.js  module.exports = {
- purge: [],
+ purge: ['./pages/**/*.js', './components/**/*.js'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}

The next part is including required tailwind imports to your global CSS file in styles/globals.css

At the top of the file you can add your tailwind imports as below

/* Tailwind CSS */

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

If you don’t want to use any another stylings then tailwind you can either remove all another styles in your application.

Now we can test our application! 🎉

Let’s add the code below in to your application pages/index.js file.

export default function Home() {
return (
<div className='text-center mt-6'>
<h1 class='text-7xl text-blue-500'>
TailwindCSS with NextJS
</h1>
</div>
)
}

Project github repository:

You can buy me a coffee!

Thank you for reading this far.

Follow me on Medium or Github if you’re interested in more in-depth and informative write-ups like these in the future. 😀

Melih

Senior Full Stack Software Engineer — Javascript — Berlin

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store