# Using TailwindCSS with Remix

Let's see how to do the setup of [TailwindCSS](https://tailwindcss.com) for a project using [Remix](https://remix.run).

## Install Tailwind

The first thing we need to do is to install Tailwind in our project

```sh
npm install tailwindcss
```

## Create the configuration file

Now we can create a configuration file, let's create `config/tailwind.js` file in the root of our project and add the following code:

```js
module.exports = {
  mode: "jit", // this will enable Tailwind JIT compiler to make the build faster
  purge: ["./app/**/*.{ts,tsx}"], // Here we are going to tell Tailwind to use any .ts or .tsx file to purge the CSS
  darkMode: "media", // Use media queries for dark mode, customize it as you want
  theme: { extend: {} }, // customize the theme however you want here
  variants: {}, // activate any variant you want here
  plugins: [], // add any plugin you need here
};
```

## Import the styles

Now, we need to import the CSS of Tailwind it in our application, since Tailwind it's a global CSS we can import it directly in our `app/root.tsx` file. The file should have this inside:

```tsx
import type { LinksFunction } from "remix";
import tailwindUrl from "./styles/tailwind.css";

export let links: LinksFunction = () => {
  return [{ rel: "stylesheet", href: tailwindUrl }];
};

// There rest of your root route here
```

We are importing a CSS file in `app/styles/tailwind.css`, this file doesn't exists yet, we are going to create it.

## Create the CSS in development

Now let's create the file we are going to import. In our `package.json` we can add the following script:

```bash
tailwindcss --output ./app/styles/tailwind.css --config ./config/tailwind.js --watch
```

This will tell the Tailwind CLI to output a CSS file in the path we are using in our root route, it will also use the configuration we created in `config/tailwind.js` so it will enable JIT and purge the CSS and it will run in watch mode. Because we are running it in watch mode we can now go to any `.ts` or `.tsx` file in our `app` directory and Tailwind will recompile only to add or remove the classes we need.

## Create the CSS for production

Once we are ready to build our application for production we want to create minified CSS and don't have a running process, so we can go again to our `package.json` and add another script there.

```bash
tailwindcss --output ./app/styles/tailwind.css --config ./config/tailwind.js --minify
```

The script is really similar, we only changed `--watch` with `--minify`, by doing this we process will run and finish so it will not keep running and the CSS in `app/styles/tailwind.css` will be minified and ready for production.

---

That's it, there's nothing really specific of Remix here, only the way we import the CSS and add the link and the setup take only a few minutes.