[erpnext] app 集成 tailwindcss 4.x

假设原始目录结构是

├── apps
│   └── myapp
│       ├── README.md
│       └── myapp
│           ├── config
│           ├── hooks.py
│           ├── setup
│           ├── templates
│           ├── www
└──         └── myapp

首先，在 apps/myapp 下执行

mkdir -p src/styles
touch src/styles/input.css

在 input.css 中写入：

@config "../../tailwind.config.js";
@import "tailwindcss";

然后，创建 tailwind.config.js 文件：

module.exports = {
  content: [
    './myapp/templates/**/*.html',
    './myapp/public/**/*.html',
    './myapp/www/**/*.html'
  ],
  theme: {
    extend: {}
  },
  plugins: []
}

创建 postcss.config.js 文件：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

最后，构建 TailwindCSS 输出文件

npx @tailwindcss/cli -i ./src/styles/input.css -o ./myapp/public/css/tailwind.css --minify

这个命令只会输出在 tailwind.config.js 的 content 指定的文件里出现过的 css-class。

为了方便下次构建，可以在 package.json 中添加命令：

"scripts": {
  "build:css": "npx @tailwindcss/cli -i ./src/styles/input.css -o ./myapp/public/css/tailwind.css --minify"
}

使用方法：

<link rel="stylesheet" href="/assets/myapp/css/tailwind.css">
<div class="bg-green-600 text-white p-4 rounded shadow">
  TailwindCSS 4.x 已成功集成！
</div>

效果：

最终的目录结构为：

├── apps
│   └── myapp
│       ├── node_modules
│       ├── package.json
│       ├── postcss.config.js
│       ├── README.md
│       ├── src
│       │   └── styles
│       │       └── input.css
│       ├── tailwind.config.js
│       └── myapp
│           ├── config
│           ├── hooks.py
│           ├── public
│           │   └── css
│           │       └── tailwind.css
│           ├── setup
│           ├── templates
│           ├── www
└──         └── myapp