react+umi+taiwinds配置问题

react+umi+taiwinds配置问题

1.我得umi版本是3.5.37,需要下载的东西:

  yarn add  tailwindcss@npm:@tailwindcss postcss7-compat @tailwindcss/postcss7-compat autoprefixer@^9

2.添加tailwind.config.js配置文件

module.exports = {
    mode: "jit",
    purge: ["./src/**/*.{ts,tsx,js,jsx}"],
    darkMode: false,
    theme: {
      extend:{
        colors:{
          'gega':'#243c5a'
        },
        spacing: {
          '13': '3.25rem',
        }
      },
      screens:{
        'sm':'330px',
        'md':'540px',
        'lg':'1200px'
      }
    },
    variants: {},
    plugins: [],
  };

3.添加umi配置,.umirc.ts

 extraPostCSSPlugins: [require("tailwindcss"), require("autoprefixer")],

4.在共工样式中添加

 @tailwind utilities;

这时你可以运行了,但是坑来了,更改样式后不热更新,so需要下载cross-env插件(针对window系统),下载后需要配置启动:

  "start": "cross-env TAILWIND_MODE=watch   umi dev",

基本就ok了