React/JS/Html ： 在antd Pro 4.1.0中使用tailwindcss

 ant design pro 版本 

 4.1.0

 

 大概分這么幾步：npm安裝tailwindcss，導入tailwindcss插件 --> 新建 .css 文件 --> 引用該插件 --> 在組件中使用具體樣式

 

說幾點：

1、由於tailwindcss使用postcss開發，因此，我們看postcss文檔先，如下：

 

 

它是嗅探后綴為 css的文件，然后用postcss包去編譯，這里首先你得裝有postcss包，然后導入包，因此待會你的tc命令（tc代表tailwindcss，下同）別寫在 .less文件內，要寫在css文件內

 

2、umi 導入 postcss包，有它自己的機制

 

 https://umijs.org/zh-CN/config#extrapostcssplugins

 

步奏1：安裝 tailwindcss 和常用 postcss 插件

 cnpm install tailwindcss postcss-import postcss-nested autoprefixer --save-dev

步奏2：導入tc和相關postcss插件

在config/config.js中加入

{
 routes:[
    // ...
],
 extraPostCSSPlugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('postcss-nested'),
    require('autoprefixer'),
  ],
}

 

我特地標出來了，它和routes同級

步奏3：使用

新建css文件

 

 

style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

 

index.jsx 

 

 index.jsx

 

import React from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Card, Alert, Typography } from 'antd';
import styles from './style.less';
import './style.css';


export default () => (
  <PageContainer>
    <div className="divide-y-2 divide-gray-500 divide-dashed">
      <div className="text-center py-2">1</div>
      <div className="text-center py-2">2</div>
      <div className="text-center py-2">3</div>
    </div>
  </PageContainer>
);

 

結果

 

 

 

完。

 

 常見問題

1、我發現更新到 umi 3版本后，只需要如下導入即可，否則報錯

 

 extraPostCSSPlugins: [
    require('tailwindcss'),
  ],

 

 

 

參考資料：

在ant pro中使用tailwindcss   https://www.jishuwen.com/d/pvb2/zh-tw

@import知識 https://blog.csdn.net/zyf13671493506/article/details/104736969/

postcss文檔 https://github.com/postcss/postcss#usage