diff --git a/docs/recipes/ui/add-style.md b/docs/recipes/ui/add-style.md new file mode 100644 index 00000000..308bbf09 --- /dev/null +++ b/docs/recipes/ui/add-style.md @@ -0,0 +1,32 @@ +# How do I use stylesheets with SAFE? +The default way to add extra styles is to add them using Tailwind classes. +If you wish to use your own CSS stylesheets with SAFE apps, Vite can bundle them up for you. + +There are two different approaches to adding your own CSS file, depending on what files you have available. + +## Method A: Import into `index.css` +The default template includes a stylesheet at `src/Client/index.css` which contains references to Tailwind. +The cleanest way to add your own stylesheet is to create a new file e.g. `src/Client/custom-style.css` and then reference it from `index.css`. + +1. Create your custom css file in `src/Client`, e.g. `custom-style.css` +1. Import it into `index.css` + ```diff + +@import "./custom-style.css"; + @tailwind base; + @tailwind components; + @tailwind utilities; + ``` + +## Method B: Import without `index.css` +In order for Vite to know that there are styles to be bundled, you must import them into your app. By default this is already configured for `index.css` but if you don't have it set up, not to worry! Follow these steps: + +1. Create your custom css file in `src/Client`, e.g. `custom-style.css` +1. Direct Fable to emit an import for your style file. + - Add the following to `App.fs`: + ```fsharp + open Fable.Core.JsInterop + importSideEffects "./custom-style.css" + ``` + +## There you have it! +You can now style your app by writing to the `custom-style.css` file. \ No newline at end of file diff --git a/mkdocs.yml b/mkdocs.yml index d474d54d..d74e39e5 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -75,6 +75,7 @@ nav: - UI: - Add Tailwind support: "recipes/ui/add-tailwind.md" - Add daisyUI support: "recipes/ui/add-daisyui.md" + - Add Stylesheet support: "recipes/ui/add-style.md" - Add Feliz support: "recipes/ui/add-feliz.md" - Add FontAwesome support: "recipes/ui/add-fontawesome.md" - Migrate from a CDN stylesheet to an NPM package: "recipes/ui/cdn-to-npm.md" @@ -136,7 +137,6 @@ nav: - Create a data module using SQLProvider SQL Server SSDT: "v4-recipes/storage/use-sqlprovider-ssdt.md" - UI: - Add FontAwesome support: "v4-recipes/ui/add-fontawesome.md" - - Add Stylesheet support: "v4-recipes/ui/add-style.md" - Add Bulma support: "v4-recipes/ui/add-bulma.md" - Use different Bulma Themes: "v4-recipes/ui/use-different-bulma-themes.md" - Remove Bulma: "v4-recipes/ui/remove-bulma.md"