tailwindcss的使用
www.tailwindcss.cn/docs/instal…
vue.config.js
Vue CLI 内部使用了 PostCSS。
你可以通过 .postcssrc 或任何 postcss-load-config 支持的配置源来配置 PostCSS。也可以通过 vue.config.js 中的 css.loaderOptions.postcss 配置 postcss-loader。
我们默认开启了 autoprefixer。如果要配置目标浏览器，可使用 package.json 的 browserslist 字段。 关于 CSS 中浏览器前缀规则的注意事项
在生产环境构建中，Vue CLI 会优化 CSS 并基于目标浏览器抛弃不必要的浏览器前缀规则。因为默认开启了 autoprefixer，你只使用无前缀的 CSS 规则即可。
postss.config.js
module.exports= {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
]
}
tailwind.config.js
mark.貌似purge中的设置会丢样式 ，需再研究后更新
module.exports = {
/* ... your actual config */,
purge: {
// Learn more on https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
enabled: process.env.NODE_ENV === 'production',
content: [
'components/**/*.vue',
'layout/**/*.vue',
'views/**/*.vue',
'plugins/**/*.js'
]
}
}
参考
