Tailwind, as explained on their official website, is a utility-first CSS framework packed with classes like and that can be composed to build any design, directly in your markup. flex, pt-4, text-center rotate-90 As a beginner, writing pure CSS was very good since it helped in understanding and memorizing the rules needed to achieve a specific layout. I had a lot of experience in doing this, however, none brought me the satisfaction and productivity boost that TailwindCSS has. Tailwind has a very basic syntax. Here is an example of how it looks like: <figure class="bg-gray-100 rounded-xl">
  <img class="w-32 h-32" src="/sarah-dayan.jpg" alt="" width="384" height="512">
  <div class="pt-6 space-y-4">
    <blockquote>
      <p class="text-lg">
        “Tailwind CSS is the only framework that I've seen scale
        on large teams. It’s easy to customize, adapts to any design,
        and the build size is tiny.”
      </p>
    </blockquote>
    <figcaption>
      <div>
        Sarah Dayan
      </div>
      <div>
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure> Each class represents a CSS declaration. In the example above represents pt-6 padding-top: 1.5rem; This will generate the following: Tailwind has a myriad of benefits compared to custom CSS Some of the things I found interesting about Tailwind are: No need to leave your HTML code Writing code in one place can be faster and more interesting other than jumping from file to file, this can help to focus more on the task at hand. At times this may become messy, especially when working on large projects. Smaller Styles Tailwind guarantees a consistent bundle size since utility class names can be shared between elements. For unused CSS, Tailwind is paired with purge CSS which removes extra classes on the codebase. Higher Productivity Writing Tailwind CSS is much faster compared to writing CSS or CSS-in-JS. Text editors and IDEs automatically help us with the autocomplete and formatting, however, in order to trigger the autocomplete we have to write the selectors and pieces of declarations. In addition, variants in Tailwind have prefixes which can be added to classes, representing a specific CSS pseudo-class or custom plugins. Consistency Also, Tailwind has a lot of pre-built classes mainly for sizing and colouring, this will reduce or completely remove the need to implement a design system. Customization Developers can extend or modify classes in the file. One can tamper right into Tailwind and can also add custom plugins, changes made will be reflected in the final stylesheet. tailwind.config.js Inside this file, one can create normal CSS classes. Tailwind Drawbacks Some of the things I may disagree with Tailwind: Readability When a considerate amount of classes are added to an element, it may become daunting to read. With correct component abstractions, this can be easily solved. Complex Animations Archiving complex animations is very hard. One would have to create a class for each element in order to use plain CSS, this will end up in doing more work. The use of libraries can also be used to solve this. Some CSS properties are not included. My Final Thoughts In my journey Tailwind has helped in increasing my productivity, reducing the bundle size of my apps and making me more consistent. Although it may have worked well for me and many other developers, it doesn't mean it is the perfect solution for every project. Us front-end developers as long as we guarantee maintainability, scalability, and performance, Tailwind is definitely the best solution considering its myriad of benefits.

Why I Switched To Tailwind For Writing CSS

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

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

10 Firefox Dev Tools things that you might not know yet

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

10 Firefox Dev Tools things that you might not know yet

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps