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/

The Tech Stack of a Solo-Developer to build a SaaS With React and AWS

Premium React Templates with Next JS and Tailwind CSS

Introducing Tailwind CSS: Pros and Cons of Tailwind

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

The Tech Stack of a Solo-Developer to build a SaaS With React and AWS

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 Tech Stack of a Solo-Developer to build a SaaS With React and AWS

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

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps