如何Remix 中使用 Tailwindcss
Remix是通过 Vite 进行构建的,Vite 原生就支持 PostCSS,通过以下几步就可以设置完成
- 安装 PostCSS 插件
npm install -D tailwindcss autoprefixer
- 添加PostCSS配置文件
## postcss.config.js
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
- 添加 Tailwind 配置文件
# tailwind.config.js
export default {
content: ["./app/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
}
测试
启动项目,添加 class
CSS 生效了
Vite 想的很全面,功能很完善,很多插件默认自带了,不需要安装,可以在官网查看。https://vitejs.dev/guide/features