What’s all the fuss about 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.

Step 1

Open this link (https://github.com/tushar2289/react-typescript-parcel2/generate) and generate a new react project with Typescript support and Parcel bundler.

Step 2

yarn add tailwindcss
.postcssrc

Step 3

@tailwind base;@tailwind components;@tailwind utilities;
Tailwind CSS lint error

Step 4

.stylelintrc

Step 5

warnings from tailwind
tailwind added

Step 6

<div className="p-4 text-red-300 font-bold">Hello World!</div>
after adding tailwind utility classes

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

--

--

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