Wang xinyangavatar
PostsAbout

2024/04/10

Leptos + tailwindcss

  1. 安装
npm install -D tailwindcss
//或者用bun？？
  1. 初始化
npx tailwindcss init
  1. tailwind.config.js配置中加上对*.rs文件的扫描
module.exports = {
  content: ["./src/**/*.rs"],
  theme: {
    extend: {},
  },
  plugins: [],
};
  1. 项目根目录下放置input.css
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. 输出css到某个目录
npx tailwindcss -i ./input.css -o ./style/output.css --watch
  1. 修改index.html的内容
<!doctype html>
<html>
  <head>
    <link data-trunk rel="rust" data-wasm-opt="z" />
    <!-- <link data-trunk rel="icon" type="image/ico" href="/public/favicon.ico" /> -->
    <link data-trunk rel="css" href="/style/output.css" />
  </head>
  <body></body>
</html>