How to Set Up Tailwind CSS in Your Project

Install Tailwind CSS and Dependencies

Open your terminal in your project root directory and install Tailwind CSS along with its peer dependencies by running npm install -D tailwindcss @tailwindcss/postcss postcss. If you are using a framework like Next.js, Vite, or Nuxt, the installation may differ slightly so check the Tailwind CSS documentation for framework-specific instructions. For Next.js projects created with create-next-app, Tailwind CSS can be included during the initial setup wizard, which handles all configuration automatically. For existing projects, manual installation gives you full control over the configuration.

Configure PostCSS

Create a postcss.config.mjs file in your project root if one does not already exist. Add the @tailwindcss/postcss plugin to the PostCSS configuration. This plugin processes your CSS files and transforms Tailwind directives into standard CSS during the build process. If you are using a framework that has its own PostCSS configuration mechanism, integrate the Tailwind PostCSS plugin into the existing configuration rather than creating a duplicate file. The PostCSS configuration tells your build tool how to process Tailwind's custom at-rules and utility class generation during both development and production builds.

Set Up Your CSS Entry Point

Open your main CSS file, typically named globals.css or styles.css, and add the Tailwind import directive at the top of the file using @import 'tailwindcss'. This single import replaces the older three-directive approach and brings in all of Tailwind's base styles, component classes, and utility classes. If you have existing custom CSS in this file, place the Tailwind import before your custom styles so that your custom rules can override Tailwind's defaults when needed. Ensure this CSS file is imported in your application's entry point, such as your root layout file in Next.js or your main JavaScript file in Vite.

Configure Content Sources

Tailwind CSS v4 automatically detects your source files and scans them for class names to include in the output CSS. However, if you need to explicitly specify content paths or include files from node_modules, you can add source directives in your CSS file using @source annotations. This configuration tells Tailwind which files to scan for class names so it can generate only the CSS that is actually used in your project, keeping the output file small. In production builds, Tailwind automatically purges unused styles, but incorrect content configuration can cause classes to be missing from the final output.

Customize Your Design Tokens

Use the @theme directive in your CSS file to customize Tailwind's default design tokens. Define your brand colors, font families, spacing scale, border radius values, breakpoints, and any other design tokens your project requires. For example, define custom colors that match your brand guidelines so you can use them consistently throughout your application with classes like bg-brand-primary or text-brand-accent. You can extend the default theme to add new values while keeping the originals, or override specific values to replace the defaults entirely. This customization ensures design consistency across your entire codebase.

Use Utility Classes in Your Templates

Start building your UI by applying Tailwind utility classes directly in your HTML or JSX elements. Use classes like flex, items-center, gap-4, and p-6 for layout. Apply responsive modifiers like md: and lg: to create responsive designs without writing media queries manually. Use state modifiers like hover:, focus:, and dark: for interactive and theme-aware styles. For complex components that reuse the same combination of utilities repeatedly, extract them into reusable components in your framework rather than creating custom CSS classes. This component-based approach maintains the benefits of utility-first styling while eliminating duplication.

Optimize for Production

Tailwind CSS automatically optimizes your production CSS by only including the utility classes that appear in your source files, resulting in a minimal CSS bundle typically under ten kilobytes when compressed. Verify your production build generates the expected output by running your framework's build command and inspecting the CSS file size. If certain dynamically generated class names are missing in production, ensure those classes appear as complete strings in your source code rather than being constructed through string concatenation, as Tailwind's scanner cannot detect dynamically assembled class names. Use the Tailwind CSS IntelliSense VS Code extension during development for autocomplete and class name validation.