tailwind 适配umijs/max

简介

utility-first的css framework。对于我而言，采用tailwind的原因如下：

对于react组件，没有纯css级别的组件。从hoc --> react hook，复用了无ui的逻辑，但依旧没有解决跨组件的css解决方案，而tailwind+postcss解决了此问题；而tailwind主题高度定义化，可以说非常方便。

安装

postcss 8.x 版本

umi Max内置了postcss、autoprefixer，使用以 PostCSS 插件的形式安装 Tailwind CSS

npm install -D tailwindcss

在 src 下创建 tailwind.css

src/tailwind.css

@import 'tailwindcss/base';

@import 'tailwindcss/components';

@import 'tailwindcss/utilities';

在项目根目录下创建 tailwind.config.ts

tailwind.config.ts

module.exports = {

  mode: 'jit',

  purge: [
    './public/**/*.html',
    './src/**/*.{js,jsx,ts,tsx}',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    backgroundColor: theme => ({
      ...theme('colors'),
      dark70: 'rgba(0,0,0,.7)'
    }),
    extend: {
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

 

修改配置

在 config/config.js 中增加配置项 extraPostCSSPlugins：

//...
  extraPostCSSPlugins: [
      require('tailwindcss')({
          config: './tailwind.config.ts',
      }),
  ],

全局引入 tailwindcss

你可以在你觉得合适的地方全局引入上面创建的 tailwind.css，比如在 src/global.less 中引入：

import 'tailwind.css'; 

//...

然后你就可以在我们的页面使用了：

<div className="mt-4">
    <div className="mb-3">
    ...

好了，搞定！