How to Set Up Tailwind CSS

Your components might expect global styles to be available to render correctly. Here's how to set up Tailwind CSS in your Triplex project.

You can use the Tailwind PostCSS set up with Triplex.

Install Tailwind CSS.

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Add Tailwind to your PostCSS configuration.

postcss.config.mjs

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

Import Tailwind in your CSS file.
styles.css
```
@import "tailwindcss";
```
Import the CSS file in your provider module.
.triplex/provider.tsx
```
import "./styles.css";
```
Add the provider to your Triplex config. You'll need to restart Triplex after making this change.
.triplex/config.json
```
{
  "provider": "./provider.tsx"
}
```