🔄

umijs 安装 tailwindcss

💡
Notion Tip: This page documents processes product managers should follow to ship features at Acme Corp. Helpful for getting new employees up to speed.

安装 tailwindcss 和常用 postcss 插件

yarn add tailwindcss postcss-import postcss-nested autoprefixer

在 src 下创建 tailwind.css

src/tailwind.css
@import 'tailwindcss/base';

@import 'tailwindcss/components';

@import 'tailwindcss/utilities';

修改配置

config/config.js 中增加配置项 extraPostCSSPlugins
//...
  extraPostCSSPlugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('postcss-nested'), //or require('postcss-nesting')
    require('autoprefixer'),
  ],
//...

全局引入 tailwindcss

你可以在你觉得合适的地方全局引入上面创建的 tailwind.css,比如在 src/global.less 中引入:
@import '~antd/es/style/themes/default.less';
@import 'tailwind.css';

//...
然后你就可以在我们的页面使用了:
<div className="mt-4">
    <div className="mb-3">
    ...
好了,搞定!