Skip to main content
STUDS can be seamlessly integrated with Tailwind CSS to create a powerful and flexible design system. This guide shows you how to use STUDS with Tailwind CSS (version 4) in your projects.
There are conflicts when using the tailwindcss ‘base’ import and @studs/styles or @studs/react/styles. Because of this we advise against loading the tailwindcss base file and rely on theme and utilities only.

​
Step 1: Install the Required Packages

First, install both STUDS and Tailwind CSS in your project: Follow the necessary guide for getting setup using either @studs/styles or @studs/react Follow the tailwindcss guide for your framework of choice

​
Step 2: Import Styles

​
Order of Imports

When using STUDS with Tailwind, the import order is crucial:
  1. Import STUDS styles first
  2. Import Tailwind styles second
  3. Import any additional app-specific styles last
  • CSS Imports
  • JS Imports
Since STUDS Styles provides basic preflight and theming. We can omit the tailwindcss/theme and tailwindcss/preflight imports. If you need tailwind in full, use @import “tailwindcss”
In your main CSS file:
styles.css
/* Import STUDS styles first */

/* Import Tailwind */
@import "tailwindcss/utilities.css"; /* Your custom styles last */

​
Step 5: Using STUDS with Tailwind Classes

You can now combine STUDS components with Tailwind utility classes: 
import { Button } from "@studs/react/button";

function App() {
  return (
    <div className="flex flex-col items-center">
      {/* Using STUDS component with Tailwind classes */}
      <Button className="mt-4">STUDS Button with Tailwind</Button>
    </div>
  );
}

​
Step 6: Handling Conflicts

In case of styling conflicts between STUDS and Tailwind:
  1. Adjust specificity in your CSS
  2. Consider using the CSS @layer directive to organize overrides (See our [Styles Foundations for Reference])(/foundations/styles#css-cascading-layers)
@layer studs-components {
  /* Override STUDS styles with more specific selectors */
  .studs-button.custom-override {
    /* Your overrides here */
  }
}
By following these steps, you can harness the power of both STUDS and Tailwind CSS in your projects, combining the structured design system of STUDS with the utility-first approach of Tailwind.
⌘I