Remix中使用 Tailwind

如何Remix 中使用 Tailwindcss

Remix是通过 Vite 进行构建的，Vite 原生就支持 PostCSS，通过以下几步就可以设置完成

1. 安装 PostCSS 插件

npm install -D tailwindcss autoprefixer

3. 添加PostCSS配置文件

## postcss.config.js
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

2. 添加 Tailwind 配置文件

# tailwind.config.js
export default {
    content: ["./app/**/*.{js,jsx,ts,tsx}"],
    theme: {
      extend: {},
    },
    plugins: [],
  }

测试

启动项目，添加 class

CSS 生效了

Vite 想的很全面，功能很完善，很多插件默认自带了，不需要安装，可以在官网查看。https://vitejs.dev/guide/features