mirror of
https://github.com/DioxusLabs/dioxus
synced 2024-11-10 06:34:20 +00:00
.. | ||
dist | ||
public | ||
src | ||
Cargo.toml | ||
Dioxus.toml | ||
input.css | ||
README.md | ||
tailwind.config.js |
Example: Basic Tailwind usage
This example shows how an app might be styled with TailwindCSS.
Setup
- Install the Dioxus CLI:
cargo install dioxus-cli
- Install npm: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
- Install the tailwind css cli: https://tailwindcss.com/docs/installation
- Initialize the tailwind css project:
npx tailwindcss init
This should create a tailwind.config.js
file in the root of the project.
- Edit the
tailwind.config.js
file to include rust files:
module.exports = {
mode: "all",
content: [
// include all rust, html and css files in the src directory
"./src/**/*.{rs,html,css}",
// include all html files in the output (dist) directory
"./dist/**/*.html",
],
theme: {
extend: {},
},
plugins: [],
}
- Create a
input.css
file with the following content:
@tailwind base;
@tailwind components;
@tailwind utilities;
- Create a
Dioxus.toml
file with the following content that links to thetailwind.css
file:
[application]
# App (Project) Name
name = "Tailwind CSS + Dioxus"
# Dioxus App Default Platform
# desktop, web, mobile, ssr
default_platform = "web"
# `build` & `serve` dist path
out_dir = "dist"
# resource (public) file folder
asset_dir = "public"
[web.app]
# HTML title tag content
title = "dioxus | ⛺"
[web.watcher]
# when watcher trigger, regenerate the `index.html`
reload_html = true
# which files or dirs will be watcher monitoring
watch_path = ["src", "public"]
# include `assets` in web platform
[web.resource]
# CSS style file
style = ["/tailwind.css"]
# Javascript code file
script = []
[web.resource.dev]
# serve: [dev-server] only
# CSS style file
style = []
# Javascript code file
script = []
Bonus Steps
- Install the tailwind css vs code extension
- Go to the settings for the extension and find the experimental regex support section. Edit the setting.json file to look like this:
"tailwindCSS.experimental.classRegex": ["class: \"(.*)\""],
"tailwindCSS.includeLanguages": {
"rust": "html"
},
Development
- Run the following command in the root of the project to start the tailwind css compiler:
npx tailwindcss -i ./input.css -o ./public/tailwind.css --watch
Web
- Run the following command in the root of the project to start the dioxus dev server:
dx serve --hot-reload
- Open the browser to http://localhost:8080
Desktop
- Launch the dioxus desktop app
cargo run