现在tailwindcss几乎已经是标配了，因为他的优点比较明显，类似语义化的类，同时支持@apply来扩展自己的方法，如果再基于自己的cli命令，还能生成最小化的tailwindcss，比如我当前使用的皮肤，只有12K,关键这还是没有压缩的。

参考：https://www.tailwindcss.cn/docs/installation

现在开始使用：

# 官网推荐，如果你只是自己随便用用，就只要安装tailwindcss就行了 （建议直接在根目录下运行，这样以后的代码可以复用）
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
# 生成tailwind.config.js
npx tailwindcss init

生成后的tailwind.config.js类似这样：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
      //指定themes下的文件，一般都是php后缀
      "./usr/themes/**/*.{php,blade.php}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

然后在要修改的皮肤下的app.css添加tailwind的基础css，例如皮肤根目录一下的style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

再运行

npx tailwindcss -i ./usr/themes/[目录]/style.css -o ./usr/themes/[目录]/assets/css/app.css --watch

这时候就可以相当于webpack的watch了。
还是非常方便的，只是有几缺点：

  • header中引入的css，只能是app.css，而且默认没有带上版本号，如果客户端做了缓存，下次更新的时候可能不会更新
  • 无法象vite 那样自动refresh，但这不是当前内容。后面看怎么利用vite/webpack来做refresh看看，实在不行browser-sync也能解决。

标签: none

添加新评论