Build stunning UIs faster with Tailwind CSS
The utility-first CSS framework for rapidly building custom designs without leaving your HTML.
Get StartedWhy Tailwind CSS?
Utility-First
Use small, single-purpose classes to build complex designs directly in your markup.
Responsive
Add variants for responsiveness using Tailwind's mobile-first syntax.
sm:text-lg md:bg-blue-500 lg:py-4 xl:w-1/2
Customizable
Customize every aspect of Tailwind using the configuration file.
Getting Started
1. Install Tailwind
npm install -D tailwindcss postcss
Then create a tailwind.config.js file and add the following to your postcss.config.js.
2. Configure PostCSS
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {}
}
}
3. Add Tailwind to CSS
/* styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Import your CSS file in your HTML and you're ready to build!
Component Examples
Card Component
Tailwind CSS
The utility-first CSS framework built for human beings.
- • Easy to customize
- • No build step required
- • Perfect for small projects
Form Element
About Tailwind CSS
Tailwind CSS is the most flexible, customizable CSS framework that gives developers complete control over how their application looks while maintaining the utility-first approach that makes CSS development faster.