Skip to main content
The design system can be seamlessly integrated with Tailwind CSS to create a powerful and flexible design system. This guide shows you how to use the design system with Tailwind CSS (version 4) in your projects.
There are conflicts when using the tailwindcss ‘base’ import and @studs/styles or @strongtie/design-system/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 the design system and Tailwind CSS in your project: Follow the necessary guide for getting setup using either @studs/styles or @strongtie/design-system Follow the tailwindcss guide for your framework of choice

​
Step 2: Import Styles

​
Order of Imports

When using the design system with Tailwind, the import order is crucial:
  1. Import the design system styles first
  2. Import Tailwind styles second
  3. Import any additional app-specific styles last
Since the design system 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 the design system styles first */

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

​
Step 5: Using the design system with Tailwind Classes

You can now combine the design system components with Tailwind utility classes: 
import { Button } from "@strongtie/design-system/button";

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

​
Step 6: Handling Conflicts

In case of styling conflicts between the design system 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 the design system styles with more specific selectors */
  .studs-button.custom-override {
    /* Your overrides here */
  }
}
By following these steps, you can harness the power of both the design system and Tailwind CSS in your projects, combining the structured design system with the utility-first approach of Tailwind.