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">
...
好了,搞定!