As you might notice, Tailwind CSS has become popular among the developer community. I'm a big Tailwind fan and recently, I've built several . In this article, I'll describe why Tailwind CSS has brought so much value to the front-end development community. React projects with Tailwind CSS Tailwind CSS has definitively changed the way to style your web application or your website. It brings a new paradigm and fresh air to the old school CSS. Tailwind CSS Advantages One of the main advantages of Tailwind CSS framework is that you stop writing CSS yourself. It'll save you design and development time. You just need to apply CSS classes to your HTML element. By using Tailwind, you get access to several thousand CSS classes out-of-the-box. Meaningful variables Did you remember when your programming teacher tells you to choose a meaningful variable name? When your teacher suggested you choose a variable name other than a, b, etc. So, writing a CSS rule and indicating font-size: 15px is totally a non-sense. What 15 means? Is it big, normal or small? With Tailwind CSS, you just need to apply text-sm, text-lg, or text-xl to your HTML elements. It respectively says you want a small, large or extra-large font size. You're stopping writing any non-sense number like 15px or 18px. Predefined classes Another beauty related to these predefined classes from Tailwind CSS is that you're stopping fine-tuning your design. Because Tailwind CSS has already defined all CSS classes, you aren't able to specify any random number for your margin, padding, font-size, etc. For example, Tailwind has several margin related classes like m-6 or m-8. But, it doesn't provide m-7. Another thing m-6 is equal to margin: 1.5rem; and m-8 is equal margin: 2rem;. So, you can't specify a margin equal to 1.75rem by default (you need to make some configuration change to use a margin equal to ). That means no more moving your pixel one by one: it can save you a lot of time if you're perfectionist like me. 1.75rem Out-of-the-box Tailwind CSS features In 2020, responsive websites are a must-have in frontend development. So, like any modern framework, Tailwind CSS also helps you to create responsive themes for your web application. Two other Tailwind built-in features are: making reusable Tailwind components (without installing React in your project). PurgeCSS is extremely easy to set up. So you can remove unused CSS classes and make your style file small. Tailwind CSS Cons With Tailwind, you're applying atomic classes to your HTML elements. So, styling an element, you'll end up with tons of classes applied to your elements and making HTML file difficult to read. You can solve this drawback by using , it will reduce the number of classes you need to apply. You can also solve this issue by using a modern JavaScript framework like React or Vue.js. Tailwind CSS components Components aren't provided by default Tailwind CSS doesn't provide by default styled components like in Boostrap or Bulma. You need to implement it from scratch. You'll possibly lose a lot of dev/design time. For example, Tailwind CSS doesn't provide button, navigation bar, header, etc. A small learning curve You'll face a small learning curve with Tailwind CSS. Even if you're familiar with CSS, you need to learn the predefined classes provided by Tailwind. To apply a margin, you need to specify m-, p- for padding, leading- for line-height, etc. So, it isn't intuitive but, with practice, you'll overcome this easily. Mix HTML and style When you've started web development, you've taught it's a good practice to split your HTML and CSS into two files. Basically, the HTML file focus on the structure and the CSS focus on the styling part. In Tailwind, you don't need to write CSS rules and you apply directly CSS classes to your HTML file. So, you're mixing page structure and style in your HTML file. It's like doing old school web development. In conclusion Here I've shared my opinion about Tailwind CSS and I'll continue to use this framework for my project. Definitively, Tailwind has changed the way I style my project. Using Tailwind CSS in combination with React is my current stack for front-end development in the Jamstack environment. You can check the result of my work with Tailwind at . Tailwind Themes with React I've also built several boilerplate codes with Tailwind: Eleventy Starter Boilerplate Nextjs Starter Boilerplate It should save you configuration time by providing everything you need to work with Tailwind CSS. You only need to start implementing your templates. Previously published at https://creativedesignsguru.com/why-i-love-tailwind-css-pros-and-cons-of-tailwind/

Premium React Templates with Next JS and Tailwind CSS

2022 - HackerNoon Contributor of the Year - Serverless

2022 - HackerNoon Contributor of the Year - Software Architecture

2022 - No No No Nodejs

Nominated for 2022 - No No No Nodejs

Nominated for 2022 - HackerNoon Contributor of the Year - Serverless

Nominated for 2022 - HackerNoon Contributor of the Year - Software Architecture

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Introducing Tailwind CSS: Pros and Cons of Tailwind

Too Long; Didn't Read

Company Mentioned

Remi W.

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Introducing Tailwind CSS: Pros and Cons of Tailwind

Too Long; Didn't Read

Company Mentioned

Remi W.

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES