Taro使用tailwindcss+styled-components

提示：如果需要使用Taro编写小程序而不是H5的话，此方案并不生效。可参考： https://docs.taro.zone/docs/css-in-js

在用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

2. 在 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
  }
}

2. 在全局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

参考

• https://github.com/sonofmagic/weapp-tailwindcss-webpack-plugin
• https://www.npmjs.com/package/tailwind-styled-components
• https://styled-components.com/