Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 61 additions & 0 deletions docs/recipes/ui/add-tailwind.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
# How do I add Tailwind to a SAFE project?

[Tailwind](https://tailwindcss.com/) 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.

1. [Add a stylesheet](https://safe-stack.github.io/docs/recipes/ui/add-style/) to the project

1. Install the required npm packages
```shell
npm install -D tailwindcss postcss autoprefixer
```
1. Initialise a `tailwind.config.js`
```shell
npx tailwindcss init
```
1. Amend the `tailwind.config.js` as follows
```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
mode: "jit",
content: [
"./index.html",
"./**/*.{fs,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
```

1. Create a `postcss.config.js` with the following
```javascript
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
```

1. Add the Tailwind layers to your stylesheet
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

1. In the `src/Client` folder find the code in `Index.fs` to show the list of todos and add a Tailwind text colour class(text-red-200)
```fsharp
for todo in model.Todos do
Html.li [
prop.classes [ "text-red-200" ]
prop.text todo.Description
]
```

You should see some nice red "to-do"s proving that Tailwind is now in your project.
1 change: 1 addition & 0 deletions mkdocs.yml
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ nav:
- Remove FAKE: "recipes/build/remove-fake.md"
- Package my SAFE app for deployment: "recipes/build/bundle-app.md"
- UI:
- Add Tailwind support: "recipes/ui/add-tailwind.md"
- Add daisyUI support: "recipes/ui/add-daisyui.md"
- Add FontAwesome support: "recipes/ui/add-fontawesome.md"
- Storage:
Expand Down