tailwindcss

What is tailwindcss?

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

What are tailwindcss's main functionalities?

Responsive Design

Tailwind uses responsive design modifiers like 'md:' and 'lg:' to change styles based on the screen size.

<div class='bg-blue-500 md:bg-red-500 lg:bg-green-500'></div>

State Variants

Tailwind provides state variants like 'hover:' and 'focus:' to apply styles on different element states.

<button class='bg-blue-500 hover:bg-blue-700 focus:outline-none focus:ring'></button>

Utility Classes

Tailwind offers utility classes for spacing, sizing, colors, and more, allowing for a quick and easy styling process.

<div class='p-4 max-w-sm mx-auto'></div>

Customization

Tailwind can be customized through the tailwind.config.js file, allowing you to define your own colors, spacing, and more.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-color': '#da20d8'
      }
    }
  }
};

Other packages similar to tailwindcss

bootstrap

Bootstrap is a widely used CSS framework that comes with a set of pre-designed components and responsive grid system. Unlike Tailwind's utility-first approach, Bootstrap focuses on component classes, which can lead to more semantic HTML but less customization flexibility.

foundation-sites

Foundation is a responsive front-end framework similar to Bootstrap, with a focus on mobile-first design. It provides a set of pre-styled components and a grid system. Foundation allows for more customization than Bootstrap but is less utility-focused compared to Tailwind.

bulma

Bulma is a modern CSS framework based on Flexbox. It is component-based like Bootstrap but with a simpler syntax. Bulma's design is more opinionated than Tailwind's, and it doesn't offer the same level of low-level control.

tachyons

Tachyons is another utility-first CSS framework that aims to provide as much speed as possible by using small, single-purpose classes. It shares a similar philosophy with Tailwind but has a smaller community and less extensive documentation.

README

A utility-first CSS framework for rapidly building custom user interfaces.

Documentation

For full documentation, visit tailwindcss.com.

Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

Discuss Tailwind CSS on GitHub

For chatting with others using the framework:

Join the Tailwind CSS Discord Server

Contributing

If you're interested in contributing to Tailwind CSS, please read our contributing docs before submitting a pull request.

Changelog

[4.0.0-beta.9] - 2025-01-09

Added

• Add @tailwindcss/browser package to run Tailwind CSS in the browser (#15558)
• Add @reference "…" API as a replacement for the previous @import "…" reference option (#15565)
• Add support for defining functional utilities in CSS (#15455)
• Add new --spacing(…), --alpha(…), and --theme(…) CSS functions (#15572)
• Add musl-based Linux builds of the standalone CLI (#15567)
• Improve performance of internal AST manipulations (#15529)

Fixed

• Use the correct property value for place-content-between, place-content-around, and place-content-evenly utilities (#15440)
• Don’t detect arbitrary properties when preceded by an escape (#15456)
• Fix incorrectly named bg-round and bg-space utilities to bg-repeat-round to bg-repeat-space (#15462)
• Fix inset-shadow-* suggestions in IntelliSense (#15471)
• Only compile arbitrary values ending in ] (#15503)
• Ensure @apply rules are processed in the correct order (#15542)
• Allow negative utility names in @utility (#15573)
• Remove all @keyframes contributed by JavaScript plugins when using @reference imports (#15581)
• Upgrade (experimental): Do not extract class names from functions (e.g. shadow in filter: 'drop-shadow(…)') (#15566)
• Upgrade (experimental): Migrate theme(spacing.2) to --spacing(2) (#15579)
• Upgrade (experimental): Migrate theme(…) to --theme(…) (#15579)

Changed

• Remove --container-prose in favor of a deprecated --max-width-prose theme variable so that *-prose is only available for max-width utilities and only for backward compatibility (#15439)
• Use Vite post-processor APIs for processing Svelte <style> blocks (#15436)
• Remove @property fallback rules for Firefox (#15622)