It is a utility-first css framework packed with classes and can be composed to build any design, directly in your markup.
Its like bootstrap or materialize but while frameworks give you fully built components, tailwind gives you low-level utility classes to make your own components.
To use tailwind, you'l need:
- Basic understanding of both HTML and CSS
- You can install Tailwind CLI using npm.
- You'll need node.js installed on your computer
We create a source file where we import Tailwind utilities and can even write our own css. Tailwind then processes that source file into vanilla css output file at build time with all the css which we link to our html pages.
Its Constraint Based- Provides an API for your design system.
Tailwind's utility classes help you work within the constraints of a system instead of littering your stylesheets with arbitrary values.
They make it easy to be consistent with color choices, spacing, typography, shadows and everything else that makes up a well-engineered design system.
Build anything - Build whatever you want, seriously
Because tailwind is so low-level, it never encourages you to build/design the came site twice. Even with the same color palette and sizing scale, its easy to build the same component with a completely different look in the next project.
Performance- Its tiny in production
Tailwind automatically removes all unused css when building for production. This means your final css bundle is the smallest it could possibly be. Usually less than 10kb
Mobile first - responsive everything
Tailwind lets you build responsive designs right into your html. You can add a screen size in front of any utility class and it will apply it at a specific breakpoint.
State variants - style different things on state changes
You can stick
hover, focus, active, disabled, focus-within, focus visibleor even tailwind's
group-hoverand would style something on these state changes.
Component driven - you can extract repeated utilities into a component.
If you're not into component frameworks, you can use Tailwinds
@applydirective to extract repeated utility patterns into custom css classes just by copying and pasting the list of class names.
Dark mode - To enable dark mode in your configuration file throw
dark:in front of any color utility to apply it when dark mode is active. This works for background colors, text colors, border colors and even gradients.
Customization - extend it, tweak it or change it
tailwind.config.jsto craft your own design system then let tailwind transform it into your own custom css framework.
Modern features - Tailwind provides first-class css grid suppo, composable transforms and gradients powered by css variables, support for modern state selectors like
Editor Tools - world class IDE integration
Tailwind css intellisense extension integrates perfectly with vs code providing you with intelligent autocomplete suggestions, linting, class definitions and more.
Ready-made components with Tailwind UI -
Tailwind UI is a collection of beautiful, fully responsive UI components, designed and developed by creators of Tailwind CSS.
Just-In-Time(JIT) is a faster more powerful, on-demand engine for tailwind css v2.1+
- It is a compiler for Tailwind css that generates your styles on-demand as you author your templates instead of generating everything in advance at initial build-time.
Lightining fast build times - this library can compile even the biggest projects in about 800ms(with incremental builds as fast as 3ms), no matter what tool you're using. This usually takes 3 - 8s to initially compile using CLI and 30-45s in webpack.
Every variant is enabled out-of-the-box - since the library generates styles on demand, you can use any variant you want, whenever you want. you can even stack them like
Generate arbitrary styles without writing custom css - since styles are generated on demand, you can generate a utility for any ultra-specific value using square bracket notation like
bg-[#ffa6d7]. This works with variants too eg
Your CSS is identical in development and production - you do not need to purge unused styles for production since you see the exact same css in all environments.
Better browser performance in development - since development builds are as small as production builds, the browser doesn't have to parse and manage multiple megabytes of pre-generated css.