React 在 styled-components 中使用 TailwindCss

方法1(推荐) : 编译 @apply

编译 Styled-Components 中的 @apply
将 tailwind 编译为 普通css

支持 tailwind 和 windi

Babel : https://github.com/JiangWeixian/babel-plugin-styled-windicss

配置方法

各个脚手架配置 babel 的方式不同, 大家随机应变

.babelrc 例子 : (常见于 webpack 项目中)

{
  "plugins": ["babel-plugin-styled-windicss"]
}

umi 4.0.32 例子:

import { defineConfig } from "umi";

export default defineConfig({  
  extraBabelPlugins: [
    "babel-plugin-styled-windicss"
  ]
});

vite 3.2.4 例子:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
  plugins: [
    react({
      babel:{
        plugins:["babel-plugin-styled-windicss"]
      }
    }),
  ],
});

使用

let MyDiv = styled.div`
  @apply text-red-500 text-2xl;
`;

让 VSCode 识别语法,并开启代码智能提示

官方 Tailwind CSS IntelliSense VsCode插件中设置
(配置的灵感来源于tailwind-styled-components)

 "tailwindCSS.experimental.classRegex": [        
    "styled`([^`]*)", // styled`...`
    "styled\\.[^`]+`([^`]*)`", // styled.xxx<xxx>`...`
    "styled\\(.*?\\).*?`([^`]*)" // styled(Component)<xxx>`...`
],

最终效果

智能提示 ,代码补全 , 颜色预览

悬浮提示

方法2 : 直接写到 className 中

可以让 className 有智能提示,
但 没有 颜色预览 和 鼠标悬浮显示完整 css 信息

配置 VSCode 插件的这个属性

"tailwindCSS.experimental.classRegex": [    
    "className:([^`]*)", // 添加这一行
    "styled`([^`]*)", // styled`...`
    "styled\\.[^`]+`([^`]*)`", // styled.xxx<xxx>`...`
    "styled\\(.*?\\).*?`([^`]*)" // styled(Component)<xxx>`...`
  ],

使用 attrs 来指定 className

let MyDiv = styled.div.attrs({ className: "text-red-600 text-2xl" })``;