I am looking to make managing styles easier on my website. And tailwind seems like a great option for this as there are a lot of tutorials on adding this to a website. And making it way easier to make a great looking website. My other options were things like Bootstrap, but as I have used that before it seemed too easy.

Getting started

We are going to have add the tailwindcss library to our package.json.

So we have to run the command.

npm install tailwindcss

We are also going to have to add a few files so that our next.js website knows to use tailwind instead of the built in css files.

But first let's add the tailwind base, components and utilities. Then they will have all the classes from tailwind included.

At the top of my global.css file, which covers the whole app.

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

Adding the tailwind.config.js

This file will allow us to add some of our personal options to our tailwind css install.

To get this file easily you can run this command:

npx tailwind init

You can check out my article on turning your website into a pwa if you want to learn more about what npx does.

Here is what the file should look like, in your root directory:

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

Adding in the postcss.config.js file

This will tell the next.js config to use tailwind css. As this overwrites the next.js base config file for postcss.config.js we also have to include the autoprefixer to our plugins.

Here is the file I am using:

module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    }
}

After building your app you may get this warning:

warn - Tailwind is not purging unused styles because no template paths have been provided.
warn - If you have manually configured PurgeCSS outside of Tailwind or are deliberately not removing unused styles, set `purge: false` in your Tailwind config file to silence this warning.
warn - https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css

I will show you how to fix this, you just have to change this line to your tailwind.config.js.

module.exports = {
  purge: {
    enabled: true,
    content: ['./pages/**/*.js','./pages/*.js'],
  },
  ...
}

This will tell tailwind to remove all built in classes that you don't use for your app. Also, to only look into the pages directory for any files that will need the purge of classes from them. Now when building the app size, and css file size will be a lot smaller.

Once this has been done you should be able to use the tailwind css classes within your html and then see the results in your next.js app.

Conclusion

This will now help me restyle elements and make sure they can fit on all sizes. Now just to go through my current css and see what I cna recreate using tailwind css.

One quick edit on the 22nd August, I have just tried to upload my website after completing all of the changes, then loading up the npm start caused me to see my nav bar was not styled properly.

So, looking into I have seen my error, and it is very simple. When purging the results I did not include my components file, so it was purging the unique styles on the nav bar. I did not come across this immediately I first thought it was a problem with my code and after looking up possible reasons I found this issue about not including all the files with HTML in the content like above. Here is the correct way to include it:

module.exports = {
  purge: {
    enabled: true,
    content: ['./pages/**/*.js','./pages/*.js','./components/*.js'],
  },
  ...
}

Thanks again for reading and I hope this helps!

Back to Home