DEV Community

loading...
Cover image for What is Tailwind CSS

What is Tailwind CSS

Siddharth Chaudhary (he/him)
Hi I’m Siddharth. A developer 👨‍💻🧑‍💻
Originally published at easyui.dev ・3 min read

A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

That's the description of Tailwind CSS given on the Tailwind CSS website. But what exactly is Tailwind CSS, and why should you use it? Today I'm going to explain to you exactly what Tailwind CSS is, core concepts, examples, and things you should be prepared for before using it.

The basic idea of Tailwind CSS

With Tailwind CSS, you can style elements using prebuilt css utility classes.

For example:

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-gray-500">You have a new message!</p>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Taken from the tailwindcss website

As opposed to:

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

Taken from the tailwind css website

Both examples above produce the same result, but it would take much less time to write the first example, which uses Tailwind CSS.

But why not use inline styles?

Inline styles come with shortfalls. They are not responsive, and cannot take care of states such as :hover, :focus, etc. Tailwind CSS takes care of this.

So how do these :hover and :focus styles work?

Easy. Just prefix any css class with hover: and it will only work when the element is hovered. This is the same for focus (focus:).

Example

<button class="bg-red-500 p-2 rounded-lg hover:bg-red-600">Button</button>
Enter fullscreen mode Exit fullscreen mode

The class bg-red-600 will only be applied when the button is hovered

And responsive?

As easy as hover: and focus:. You simply need to prefix a utility with one of the responsive breakpoints below, and the class will only be applied when the user's screen is bigger than a minimum width of the breakpoint.

List of breakpoints

  • sm: - min width 640px
  • md: - min width 768px
  • lg: - min width 1024px
  • xl: - min width 1280px
  • 2xl: - min width 1536px

What does the file size look like

The full Tailwind CSS is HUGE. It is a whopping 3566.2kB, making your website really slow.

But how can we fix this?

We can fix this easily by purging our css.

Think of Tailwind like a giant box of LEGO — you dump it all out on the floor and build what you want to build, then when you’re done you put all the pieces you didn’t use back into the box.

This is what it says on the Tailwind CSS website.

What is purging css?

Purging css is when we remove unused css classes, clearly reducing the Tailwind CSS file size by large amounts.

On one website we tested, the file size dropped to 10kb! 10kb from 3566.2kp! Don't tell me you're not impressed.

How can I start using Tailwind CSS

We'll go through this in detail in another article. Until then, you can check the Tailwind CSS docs.

I hope this article helped you understand what Tailwind CSS is, its core concepts and why you should use it. Support me by buying me a coffee in the link below.

Buy me a coffee ☕️ ☕️

And if you want more content like this, you should go to easyui.dev

Discussion (0)