方法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" })``;