Installing Tailwind CSS as a PostCSS plugin
Installing Tailwind CSS as a PostCSS plugin is the most seamless way to integrate it with build tools like webpack, Rollup, Vite, and Parcel.
Start using Tailwind in your HTML
Make sure your compiled CSS is included in the
<head>(your framework might handle this for you), then start using Tailwind’s utility classes to style your content.index.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="/dist/main.css" rel="stylesheet"> </head> <body> <h1 class="text-3xl font-bold underline"> Hello world! </h1> </body> </html>
Are you stuck? Setting up Tailwind with PostCSS can be a bit different across different build tools. Check our framework guides to see if we have more specific instructions for your particular setup.Explore our framework guides
What to read next
Get familiar with some of the core concepts that make Tailwind CSS different from writing traditional CSS.
Using a utility-first workflow to build complex components from a constrained set of primitive utilities.
Build fully responsive user interfaces that adapt to any screen size using responsive modifiers.
Style elements in interactive states like hover, focus, and more using conditional modifiers.
Optimize your site for dark mode directly in your HTML using the dark mode modifier.
Manage duplication and keep your projects maintainable by creating reusable abstractions.
Customize the framework to match your brand and extend it with your own custom styles.