diff --git a/src/pages/examples/use-tailwind-css.md b/src/pages/examples/use-tailwind-css.md index 9c6d63c..f6480a4 100644 --- a/src/pages/examples/use-tailwind-css.md +++ b/src/pages/examples/use-tailwind-css.md @@ -1,11 +1,10 @@ - --- layout: default --- +# Routify and Tailwind CSS -# Routify and tailwind -A guide on how to integrate routify and tailwind css. Note this is a community written guide by [GHOST](https://github.com/ghostdevv) and [thaicodingdev](https://github.com/thaicodingdev). +A guide on how to integrate routify and Tailwind css. Note this is a community written guide by [GHOST](https://github.com/ghostdevv), [thaicodingdev](https://github.com/thaicodingdev) and [haudraufhaun](https://github.com/haudraufhaun). # Getting Started @@ -19,33 +18,41 @@ cd my-routify-app npx @roxi/routify init ``` -# Set up tailwind +# Set up Tailwind CSS + +1. Install the npm package: -1. Install ```sh npm i tailwindcss -D ``` -2. Config +2. Do following configuration: + + - We need a tailwind config file, so create the `tailwind.config.js` file with following command: - - We need a tailwind config file, so create a tailwind.config.js in your project folder, it's contents should look like this: + ```sh + npx tailwindcss init + ``` - ```js - module.exports = { - purge: ['./src/**/*.svelte', './src/**/*.css'], - } - ``` + - Configure `content` as following: + + ```js + module.exports = { + content: ["./src/**/*.svelte", "./src/**/*.css", "./index.html"], + // more config below here + }; + ``` - Update your `postcss.config.js` to include tailwind - ```js - module.exports = { - plugins: [ - // Keep current plugins and add tailwind below: - require('tailwindcss')() - ], - }; - ``` + ```js + module.exports = { + plugins: [ + // Keep current plugins and add tailwind below: + require("tailwindcss")(), + ], + }; + ``` # Adding our css @@ -60,4 +67,5 @@ In your global.css file (which can be found here: `src/global.css`), add your ta You can remove all the default styles from your global css file since you now have tailwind, but it might be good to include a css reset like [greset](https://www.npmjs.com/greset) or [modern normalize](https://www.npmjs.com/package/modern-normalize) # All done! + You can now run it with `npm run dev`! If you have any issues join [the discord](https://discord.gg/ntKJD5B)