How do I add Tailwind to a SAFE project?

Tailwind is a utility-first CSS framework which can be composed to build any design, directly in your markup.

As of SAFE version 5 (released in December 2023) it is included in the template by default so it can be used straight away.

If you are are using the minimal template or if you are upgrading from an old version of SAFE, continue reading for installation instructions.

Add a stylesheet to the project

Install the required npm packages

npm install -D tailwindcss postcss autoprefixer

Initialise a tailwind.config.js
```
npx tailwindcss init
```

Amend the tailwind.config.js as follows

/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: "jit",
  content: [
    "./index.html",
    "./**/*.{fs,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Create a postcss.config.js with the following

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Add the Tailwind layers to your stylesheet

@tailwind base;
@tailwind components;
@tailwind utilities;

Start using tailwind classes e.g.

for todo in model.Todos do
    Html.li [
        prop.classes [ "text-red-200" ]
        prop.text todo.Description
    ]