Back

What is TailwindCSS

What is TailwindCSS cover pic
3 min read
# Books

Hey there 👋! In this post, I’ll introduce TailwindCSS and explore how it improves upon traditional CSS. TailwindCSS is a modern way of writing CSS that powers website styling, including my own site!

Challenges with Traditional CSS

  • Repetition of Properties: In my previous company, we used CSS and SASS for styling. Despite defining common classes, we often ended up creating new ones with similar properties, leading to redundancy.
  • Naming Conflicts: Finding unique class names to prevent overlap became a constant struggle.
  • Larger Bundle Sizes: Repeated properties across classes increased our CSS file sizes significantly.

Advantages of TailwindCSS

  • Utility-First Classes: TailwindCSS provides utility classes that directly map to CSS properties, like so:
<!-- Two divs styled with CSS and TailwindCSS -->

<!-- Traditional CSS -->
<style>
  .container {
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

<div class="container"></div>

<!-- TailwindCSS -->
<div class="flex items-center justify-center"></div>
  • Intelligent Autocompletion: With IntelliSense support, class suggestions are automatically populated. Check out this VSCode plugin for a streamlined experience🔥.
  • Simplified Class Naming: No more brainstorming for unique class names 😮‍💨.
  • Built-In Design System: Tailwind comes with a comprehensive design system out of the box📦.
  • Efficient Debugging: With HTML and styles in one place, debugging is faster and simpler.

TailwindCSS Plugins🔌

Tailwind plugins add powerful enhancements to your app by extending the tailwind.config file. Here are a couple of my favorites👇:

@tailwindcss/typography 😘

  • Ideal for styling typography-heavy content. This page, for instance, uses it for easy styling learn more.
  • Widely used for blog and article content!

tailwindcss-animate

  • Adds animation utility classes to your toolkit learn more.

Learning path🛤️

Learning path
  • If you’re new to TailwindCSS, I recommend starting with a solid understanding of CSS.
  • During build time, Tailwind classes are converted into CSS, so knowing the fundamentals of CSS will make Tailwind’s utility-based approach feel like second nature.

What’s next🤔

  • Once you’re comfortable with Tailwind, you can choose a component library that complements it. Here are two paths:

    Note: Avoid mixing a CSS-based component library with Tailwind—it can lead to a messy setup😵‍💫.

Thanks for reading, and stay tuned for more updates. Peace✌️