I am using Tailwindcss for almost 1 and a half years. It is one of the easiest CSS framework I have ever used. One of the best things about Tailwindcss is it doesn't impose any design system by default. You only get sane default preset that's it. But it comes with a little bit of a learning curve because you have to build your design system and components. Before starting with Tailwindcss I have been using Boostrap for all of my projects and I really loved it because it is really easy to get started. The most difficult part of Tailwindcss for me was its initial setup. Most of my projects I worked on are Python projects but Tailwindcss requires node.js for compilation( here compilation means it generates CSS using js ) and you have to set up new config files. Luckily for me, I had some node.js exposure so I already knew how to install packages and how node.js packages work. If you don't know node.js that's alright because you don't have to learn in order to use Tailwindcss all you need to have node.js installed and run few commands. After installation node.js you can check out their official documentation to setup Tailwindcss tailwindcss doc.

I usually make few changes to the config file. I will share the config file then explain what they are.

tailwind.config.js

module.exports = {
  purge: {
    enabled: process.env.NODE_ENV == "production",
    content: [
      './public/index.html'
    ]
  },
  darkMode: false, // or 'media' or 'class'
  theme: {},
  variants: {
    extend: {},
  },
  plugins: [],

As you can see that It looks like a normal js file and yes it is a normal js file that has been generated by the Tailwindcss package command. The first thing I do is add purge config which if you read Tailwindcss docs you will find out is removes unnecessary CSS from your generated CSS if you are using it in your project. I only enabled it when I an building my CSS for production because it just makes development slow because it has to look each time in all my files which CSS class I am using.

postcss.config.js

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
        process.env.NODE_ENV == 'production' ?
            require('cssnano') : false
    ]
}

This config file is for Postcss which actually builds CSS for us. The one thing adds in there is cssnano so when I build my CSS for the production it minimizes my CSS file.

Usually, I keep two commands in my package.json file for the project and one for dev and one for prod.

  "scripts": {
    "build:dev": "postcss src/css/styles.css -o public/css/styles.css",
    "build:prod": "NODE_ENV=production postcss src/css/styles.css -o public/css/styles.css"
  }

The dev build command builds the CSS file with all the CSS classes so I get my editor autocomplete working properly.