umi-plugin-tailwindcss

This plugin is only valid for umijs 3.x，Umi4 has built-in support for Tailwindcss and is no longer needed for new projects. umi4 tailwind-css doc

中文文档

Install

Using npm:

$ npm install umi-plugin-tailwindcss -D

or using yarn:

$ yarn add umi-plugin-tailwindcss -D

Setup

tailwindCssFilePath?: string.

tailwind.css file path, can be missing。

// .umirc.ts
// eg
...
tailwindcss: {
  tailwindCssFilePath?: '@/tailwind.css',
  tailwindConfigFilePath?: 'tailwind-custom.config.js' // Default value: tailwindConfigFilePath || join(process.env.APP_ROOT || api.cwd, 'tailwind.config.js'),
},
...

Explain

This plugin do the following things to support tailwind in umi。

1. Add tailwindcss dependencies auto. For 4.x: defauts to the latest version tailwindcss@latest For 3.x: defauts to the compat version@tailwindcss/postcss7-compat, because of umi doesn't support postcss8 now）。

   You can also install the specific version of tailwindcss. If tailwindcss exist in devDependencies, plugin will use it, otherwise plugin will use @tailwindcss/postcss7-compat。

2. Add Tailwind to your CSS。If tailwindCssFilePath setting exist, plugin will import this css file automatically. If not exist, will create a temporary file, and import it.

3. If tailwind.config.js not exist at tailwindConfigFilePath, it will create one。

4. Add postcss plugin in umi。