Getting Started
Installation
# Install with npm
npm install tailwindcss
# Configure with PostCSS
npx tailwindcss init
After installing, add your CSS file as the source in your PostCSS configuration.
Basic Configuration
module.exports = {
content: [
'./src/**/*.{html,js}'
],
theme: {
extend: {},
},
plugins: [],
}
Configuration
Content Paths
Tailwind uses content paths to scan for classes in your project. Update the array in tailwind.config.js to include all source files.
Theme Customization
Tailwind ships with a default theme configuration, but you can customize colors, fonts, spacing, and more in the theme object.
Responsive Design
Breakpoints
Tailwind provides responsive variants for all common breakpoints by default. Use the sm:, md:, and lg: prefixes.