What You Need to Know About Tailwind CSS

• Material UI
• React bootstrap
• Prime React
• Shards

What is Tailwind CSS?

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

yarn add tailwindcss

{
  "modules": true,
  plugins: {
    autoprefixer: true,
    tailwindcss: true
  }
}

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

{
  "extends": "stylelint-config-standard",
  "rules": {
    "at-rule-no-unknown": [ true, {
      "ignoreAtRules": [
        "extends",
        "tailwind"
      ]
    }]
  }
}

Step 6

p-4
text-red-300
font-bold

<div className="p-4 text-red-300 font-bold">Hello World!</div>

Step 7 (Advanced)

npx tailwindcss init

future: {
   removeDeprecatedGapUtilities: true,
   purgeLayersByDefault: true,
} 

purge: {
  enabled: false,
  content: ['./src/**/*.html', './src/**/*.jsx', './src/**/*.tsx'],
},

I think Tailwind helps if you are working as a big team where you wouldn’t want your fellow team members or even your designers to randomly add new colors, padding/margin sizes, font sizes etc. Its definitely a good tool to have under your belt, but its not a replacement for learning CSS.

Have you even faced a situation where your project has grown out of bounds and you dread changing a value in CSS in fear of it breaking something which you aren’t aware of? Well this problem is solved in tailwind, since the styling of the element/component is done as part of the HTML. It vastly reduces your CSS code and therefore, improves maintainability.

Well, this is right. Having all these classes in the HTML file does make it very hard to read. But, tailwind philosophy is to keep your UI as part of the HTML and not add more CSS files to keep it easily maintainable. If you find yourself, using the same classes together again and again, then you should look at making it a component and extracting the CSS into that component. https://tailwindcss.com/docs/extracting-components

Tailwind internally uses PurgeCSS. This allows use to choose only the CSS used in the production build. This drastically reduces the CSS from development to production build since mostly, we use only about 15–20% of all the utility classes provided by tailwind. https://tailwindcss.com/docs/controlling-file-size

Conclusion