Skip to content
Open
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
48 changes: 28 additions & 20 deletions src/pages/examples/use-tailwind-css.md
Original file line number Diff line number Diff line change
@@ -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

Expand All @@ -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

Expand All @@ -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)