Taro使用tailwindcss+styled-components

在用Taro框架写小程序的时候,写组件样式的时候,总觉得全部写在css文件里,如果需要通过某个参数来调节不同的样式,那么就比较麻烦。

这时候就想到了styled-components,同时又由于上一个项目是使用tailwindcss来编写的样式,那么有没有办法可以使用styled-components的语法来写tailwind呢?

搜索了一下NPM仓库,还真有,tailwind-styled-components可以实现这个功能,但是实现这个功能之前,需要在Taro中安装tailwind。

安装weapp-tailwindcss-webpack-plugin

具体安装方式可以查阅官方文档连接:
https://github.com/sonofmagic/weapp-tailwindcss-webpack-plugin/blob/main/docs/taro.md

这里描述下我的步骤,当前我的Taro项目使用webpack5,于是使用插件TaroWeappTailwindcssWebpackPluginV5

  1. 安装依赖
1
yarn add -D weapp-tailwindcss-webpack-plugin postcss-rem-to-responsive-pixel tailwindcss postcss autoprefixer
  1. 在 taro-app/config 中添加
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const { TaroWeappTailwindcssWebpackPluginV5 } = require('weapp-tailwindcss-webpack-plugin')

const config = {
// ...
mini: {
webpackChain(chain, webpack) {
chain.merge({
plugin: {
install: {
plugin: TaroWeappTailwindcssWebpackPluginV5,
args: [
{
// 注意这一行(不传默认 react)
framework: 'react' // 'vue2' / 'vue3'
}
]
}
}
})
}
}
}

插件的安装就此完毕,开始安装tailwindcss,这里的操作步骤可以参考tailwindcss官方安装文档,也可以参考上面插件的文档。

  1. 执行 npx tailwindcss init

创建 postcss.config.js 和 tailwind.config.js

1
2
3
4
5
6
7
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
// tailwind.config.js
module.exports = {
content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
theme: {
extend: {}
},
plugins: [],
// v3 版本的 tailwindcss 有些不同
corePlugins: {
preflight: false
}
}
  1. 在全局css文件中引入即可使用

PS:如果在根JS中引用是无效的,原因未知。

1
2
@import 'tailwindcss/base';
@import 'tailwindcss/utilities';

这样,在Taro小程序中配置tailwindcss的操作就完成了,接下来要配置styled-components相关内容。

安装Tailwind-Styled-Component与styled-components

这两个插件互不影响,执行yarn命令安装即可。

1
2
3
yarn add -D tailwind-styled-components

yarn add styled-components

配置VSCode语法提示

使用styled-components之后会发现,使用styled语法时,并不会出现css的相关语法提示,这是因为没有安装插件造成的。

插件名称vscode-styled-components在VSCode市场中安装即可,这时可以发现styled-components语法的高亮和提示恢复正常了。那么Tailwind-Styled-Component该如何操作?

首先需要安装Tailwind CSS IntelliSense,这个插件提供了tailwindcss相关语法的高亮和语法提示。

并且Tailwind CSS IntelliSense 提供了自定义语法高亮的参数,可以在VScodesettings.json自行配置。

1
2
3
4
5
6
7
8
9
10
11
12
"tailwindCSS.includeLanguages": {
"typescript": "javascript", // if you are using typescript
"typescriptreact": "javascript" // if you are using typescript with react
},
"editor.quickSuggestions": {
"strings": true // forces VS Code to trigger completions when editing "string" content
},
"tailwindCSS.experimental.classRegex": [
"tw`([^`]*)", // tw`...`
"tw\\.[^`]+`([^`]*)`", // tw.xxx<xxx>`...`
"tw\\(.*?\\).*?`([^`]*)" // tw(Component)<xxx>`...`
]

配置完毕之后,即可实现Tailwind-Styled-Component与styled-components语法的共存。

这时再去编写样式自由度会相对高一些(但是也会更混乱),有些不适合tailwind写的样式就可以使用css来写了。

另一种方式

在查询资料的过程中,也发现了另一种在sytled-components中使用tailwindcss的方式,也就是使用@apply来将tailwind编译为普通css。
因为这种方式感觉也很有趣,特此记录一下。

使用的是一个babel插件:

1
yarn add -D babel-plugin-styled-windicss

配置babel:

1
2
3
4
5
6
7
8
9
10
//.babelrc
{
"presets": [
"next/babel"
],
"plugins": [
"babel-plugin-styled-windicss",
"babel-plugin-styled-components"
]
}

Tailwind CSS IntelliSense 插件配置:

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

使用方式:

1
2
3
4
5
let Text = styled.div`
@apply text-red-600 text-sm px-2 py-2
// Other css style
z-index: 10;
`

参考地址:
- https://blog.csdn.net/qq_37214567/article/details/124319226

参考

# ,
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×