【Tailwind笔记】React+TS+Tailwind 项目创建

React+TS+Tailwind 项目创建

此文是自己实践记录，后面加了参考的文档链接，侵联删

步骤

1. 创建 react 项目

   npx create react-app demo --template typescript
   

2. 安装 Tailwind CSS 依赖

   npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
   

3. 安装 react-app-rewired 和 customize-cra

   npm install react-app-rewired customize-cra
   

4. 修改 package.json 配置以便捷启动

   修改 script 内的 react-scripts 为 react-app-rewired 即可

   {
   "scripts": {
       "start": "react-app-rewired start",
       "build": "react-app-rewired build",
       "test": "react-app-rewired test",
       "eject": "react-app-rewired eject"
     }
   }
   

   ​

5. 在项目根目录新建 config-overrides.js 文件

   // config-overrides.js文件内容： 
   const { override, addPostcssPlugins } = require('customize-cra')
   
   module.exports = override(
     addPostcssPlugins([
       require('tailwindcss'),
       require('autoprefixer')
     ])
   )
   

   ​

6. 生成 tailwind.config.js 文件

   # 简洁版
   npx tailwindcss-cli@latest init
   
   # 完整版
   npx tailwindcss init --full
   

   此文件里，需要注意 purge 属性，比如 ./src/*.tsx，表示src文件夹下的tsx文件需要写tailwind的class，如果不加的话，是无效果的。

   • 简洁版：

     // tailwind.config.js
     
     module.exports = {
       //配置 `purge` 选项指定所有的 components 文件，使得 Tailwind 可以在生产构建中对未使用的样式进行摇树优化。
       purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
       // purge: [],
       darkMode: false, // or 'media' or 'class'
       theme: {
         extend: {},
       },
       variants: {
         extend: {},
       },
       plugins: [],
     }
     

     ​

   • 完整版： 略
     ​

7. VSCode 安装 Tailwind 插件，方便开发

   # 直接搜索 Tailwind CSS IntelliSense 安装即可
   

参考

1. 官方文档

2. React中使用Tailwind CSS的开发心得