The internet is filled with so many UI libraries already. There are: Material UI React bootstrap Prime React Shards ...and many more. Now, when there are already so many UI libraries what does tailwind do to make it stand apart from the gen pop. What is Tailwind CSS? As per the official website, 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. To put it simply, Tailwind is not a UI library but a CSS framework.It is NOT opinionated.It does not govern how a component should look, but gives us the power to create a component using the utility classes provided. Lets give this a spin, shall we. Step 1 Starting from my template so that we have a new React project will all the bells and whistles (More details about this ) React-Typescript-Parcel2 here Step 2 Adding tailwind to the project yarn add tailwindcss Tailwind uses to compile to plain CSS. Create a new file called .postcssrc file to the project’s root folder. PostCSS { : , : { : , : }
} "modules" true plugins autoprefixer true tailwindcss true Make sure to add this to .eslintignore to disable JSlinting for that file. Step 3 Create an index.css file with below code in the src folder and add the same as a link to the index.html file. @tailwind base;
@tailwind components;
@tailwind utilities; Now,  you must be seeing red squiggles indicating an error in the CSS file, but that due to the fact that stylelint doesn’t have any idea what @tailwind means. Step 4 Update the .stylelintrc file to enable support for @tailwind { : , : { : [ , { : [ , ]
    }]
  }
} "extends" "stylelint-config-standard" "rules" "at-rule-no-unknown" true "ignoreAtRules" "extends" "tailwind" Step 5 Start the local server by running the command yarn dev We see that we have the above warnings, but the important thing to note is that there are no errors. Opening, in the browser we see that tailwind is actually loaded and we can see the page like below. http://localhost:1234 Step 6 Tailwind is made up of multiple utility classes which allows us to quickly change the UI of the element. For example, if we need to make that Hello World text above have a padding, red color and bold, we would have to add the following classes to it. -4
text-red-300 -bold p font Adding these classes in src/components/App/index.tsx Hello World! < = > div className "p-4 text-red-300 font-bold" </ > div As seen above, the page hot updates to show the changes. I found this neat, where you can quickly search for any tailwind utility class and use in your project. tailwind cheatsheet Step 7 (Advanced) Remember the warning we had earlier, lets get rid of them: 1. Configuring tailwind to add future proofing. Create a tailwind.config.js file by running the below command npx tailwindcss init Now, inside the future object all the below properties: future: { removeDeprecatedGapUtilities: true , purgeLayersByDefault: true , } More details on this here 2. Purging unused CSS Update the tailwind.config.js file with the purge object as below purge: { : , : [ , , ],
}, enabled false content './src/**/*.html' './src/**/*.jsx' './src/**/*.tsx' This allows us to remove all the unused CSS which we haven’t used in any of our html or tsx files. So, this was supposed to work automatically by providing the content array directly to the purge key. Tailwind is smart enough not to purge in case of a development build and enable purging automatically in case of a production build. But, because a , it doesn’t set the NODE_ENV properly and this wasn’t allowing the purge to work as expected. For now, until the issue is resolved, you can manually enable/disable purging using the enable key. parcel 2 bug After making these changes, the warning are removed and I was able to run TailwindCSS smoothly. At this point in time, I had a few questions: 1. As someone who is well versed with CSS/SCSS, should I even think about looking into tailwind? 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. 2. What are the benefits of Tailwind over 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. 3. This will clutter my HTML file and make it very difficult to read. 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 4. How do I make sure my CSS file sizes are in check? Tailwind internally uses . 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. PurgeCSS https://tailwindcss.com/docs/controlling-file-size Conclusion Personally, I think Tailwind has lot of good things going for it with very few drawbacks. I will trying using it my personal projects and give it a nice try. Benefits Not having to think about new class names and having a predefined set of utilities is a great help.Tailwind has responsive classes which helps by allowing me to write the breakpoint logic within the HTML and not creating new media queries.Did I mention, better maintainability. Drawbacks Have to learn the utility classes. (This is one time though, once you know how to use them, it will be second nature)Increased HTML code. I’ve made all the above changes available in my Git project which can be accessed in the link below. A sample project for learning tailwind CSS. Contribute to tushar2289/learning-tailwindcss development by creating an…github.com I would love to hear your experience with Tailwind and how it helped (or didn’t help) you. If you do like the project, please comment here or star the project. It helps me to continue being motivated to bring such articles and projects. Thanks. 😸 😄 Also published at https://medium.com/@tushar2289/whats-all-the-fuss-about-tailwind-css-e1d1a1af3a90

Keep

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

What You Need to Know About Tailwind CSS

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps