https://github.com/dewfall123/umi-plugin-tailwindcss

umi-plugin-tailwindcss
https://github.com/dewfall123/umi-plugin-tailwindcss

tailwind tailwindcss umi umi-plugin

Last synced: 2 months ago
JSON representation

umi-plugin-tailwindcss

• Host: GitHub
• URL: https://github.com/dewfall123/umi-plugin-tailwindcss
• Owner: dewfall123
• Created: 2020-03-30T03:00:29.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-07-11T02:46:53.000Z (over 1 year ago)
• Last Synced: 2024-11-02T05:48:24.688Z (3 months ago)
• Topics: tailwind, tailwindcss, umi, umi-plugin
• Language: TypeScript
• Homepage:
• Size: 1.66 MB
• Stars: 35
• Watchers: 3
• Forks: 5
• Open Issues: 10
• Metadata Files:
  • Readme: README.CN.md

Awesome Lists containing this project

README

        
# umi-plugin-tailwindcss

> umi-plugin-tailwindcss，仅对 3.x 有效。umi4 内置支持 tailwind 了，新项目已经不需要此插件了 [umi4 tailwind-css 文档](https://umijs.org/docs/guides/generator#tailwind-css-%E9%85%8D%E7%BD%AE%E7%94%9F%E6%88%90%E5%99%A8)

## 安装

通过 `npm` 安装:

```bash

$ npm install umi-plugin-tailwindcss -D

```

或者使用 `yarn`:

```bash

$ yarn add umi-plugin-tailwindcss -D

```

## 配置

`tailwindCssFilePath?: string`.

引入的 tailwindcss 文件，可缺省。

```ts

// .umirc.ts

// 示例配置

...

tailwindcss: {

  tailwindCssFilePath: '@/tailwind.css',

  tailwindConfigFilePath: 'tailwind-custom.config.js' // 默认取值 tailwindConfigFilePath || join(process.env.APP_ROOT || api.cwd, 'tailwind.config.js'),,

},

...

```

## 说明

此插件会自动完成引入`tailwind`[所需做的事情](https://tailwindcss.com/docs/installation)。

1. 自动添加`tailwindcss`依赖。

   对于 4.x 版本: 默认安装最新版本 tailwindcss

   对于 3.x 版本: 默认安装的是最新版本的[@tailwindcss/postcss7-compat](https://tailwindcss.com/docs/installation#post-css-7-compatibility-build)，因为目前 umi 不支持 postcss8）。

   你也可以安装指定的 tailwindcss 版本，插件会优先使用`devDependencies`里面的`tailwindcss`包，如果不存在，会使用`@tailwindcss/postcss7-compat`。

2. 将 Tailwind 添加到你的 CSS 代码中。如果`tailwindCssFilePath`配置存在，会使用该路径的文件。如果缺少，会创建一份临时文件，并引入该临时文件。

3. 检查`tailwindConfigFilePath`是否存在`tailwind.config.js`配置文件。若缺少，会添加一份配置文件。

4. 添加 umi 的`postcss`对应的插件。