Rapidly style modern websites
without ever leaving your HTML

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a collection of pre-designed CSS classes to create user interfaces quickly. It's designed to be highly customizable, and provides a set of building blocks that can be combined to create complex layouts and designs with minimal custom CSS. All without any annoying opinionated styles you have to fight to override.

Tailwind CSS works by providing a set of utility classes that correspond to specific CSS properties, such as text color, padding, margin, and more. These classes can be applied directly to HTML elements to quickly apply the desired styles. For example, the class bg-blue-500 can be used to set the background color of an element to a specific shade of blue.

Similar to regular CSS, there are no ready-made components provided for you. Simply, add the utility classes in your HTML, and watch how Tailwind automatically attaches the styles for you! You can think of it as shorthand for your CSS.

Responsive Design

Customizable

Compatible

How to use Tailwind CSS?

  1. 1. Install Tailwind CSS

    You can install Tailwind using the Tailwind CLI tool or by importing the CDN directly in your code. For CodePen, we will be using the CDN. Click on the cog button on the top right of the JS pane and add https://cdn.tailwindcss.com under External Scripts. If installing elsewhere, read docs for detailed instructions on how to install Tailwind CSS for your specific use case/framework.
    If working in Codepen, click on Settings → Behavior → and enable Format on Save for better readability.

  2. 2. Search Docs

    Use the quick search in the docs to find the name of the class that corresponds with the CSS you would like to add. (ex. I want to bold my text so I search for 'bold'. I click on Font Weight and see that the Tailwind class I need to add is font-bold)
    Use a Tailwind CSS Cheatsheet for easier to read documentation.

  3. 3. Use classes

    Add classes to your code and watch your website come to life!
    Use Tailwind CSS VS Code Intellisense extension to enhance your Tailwind development experience by providing advanced features such as autocomplete, syntax highlighting, and linting.

Pros and Cons of Tailwind CSS

PROSCONS
✅ Not opinionated on how you should style your project⛔ Styling and HTML are mixed
✅ Faster styling process⛔ Large HTML files
✅ Easy to build responsive UIs⛔ Lack of ready-made components
✅ Ability to add custom styles⛔ Difficult if you are not familiar with CSS
✅ Compatible with many popular FE frameworks⛔ Could prevent you from learning CSS properly
✅ Optimization using PurgeCSS removes unused styles⛔ Small learning curve
✅ Proven to be a stable framework⛔ Can not do everything
✅ Makes the changes only in the file desired⛔ A build step is required
✅ No more silly names for CSS classes and ids
✅ Minimum lines of code in CSS file