3 分钟内使用 Tailwind 构建 React 组件库！

起点

造型

添加 Tailwind 来创建 React 库

创建配置文件

链接

本文假设您已了解如何构建 React 组件、库和 Tailwind。

起点

如果你想用 TypeScript 创建一个 React 组件库，并为你的项目搭建一个良好的基础，我强烈推荐 Create React Library！除了使用 Storybook 直观地测试你的组件之外，这个 CLI 还允许你在真实的 React 项目中开箱即用地测试你的组件。不妨在你的下一个 React Library 项目中使用它。

造型

嗯，这部分取决于你，我通常选择带有样式组件的样式系统，但说实话，你必须编写很多 CSS（但不要太多），如果你需要更快地移动，那么管理额外的文件可能会是一个问题。

即使这种方法可行，为什么不使用实用程序类呢？这就是 Tailwind 的用武之地！

我假设你知道什么是 Tailwind CSS，以及 Adam Wathan 和 Tailwind 团队如何让我们的生活变得更轻松，我特别喜欢它并一直在使用它，如果你这样做，你的交付和开发时间将比平时缩短（事实！）

在那里看了 20 多分钟之后（对于看代码相关的东西来说，这时间相当长！）我意识到我需要自己做这件事，并与大家分享这个启动器

添加 Tailwind 来创建 React 库

这里没有什么特别的，只需安装 tailwind CSS（按照文档操作）

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

如果出现此错误：

Error: PostCSS plugin tailwindcss requires PostCSS 8.

只需执行以下操作：

npm uninstall tailwindcss postcss autoprefixer

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

创建配置文件

创建 PostCSS 和 Tailwind 配置

在我们的项目根目录中添加

postcss.config.js包含以下内容：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

现在要创建 Tailwind 配置，只需运行：

npx tailwindcss init

通过在根文件夹内创建一个 css 文件来创建 tailwind css 文件，该文件的命名方式如下：

// ./src/tailwind.css
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

现在，在您的根项目中，您将找到index.tsx文件，您需要从库中导出所有要使用的组件，只需在其中包含我们的 tailwind CSS 即可。

import './tailwind.css'

// rest of my components exports here like

export { default as Button } from './Button'

作为最后一步，让我们在清除部分稍微改变一下顺风配置

purge: {
  enabled: process.env.NODE_ENV === 'publish',
  content: ['./src/**/*.{js,jsx,ts,tsx}']
},

稍后我将讨论启用：process.env.NODE_ENV === 'publish' 的部分

如果您阅读了创建 React Library 的文档，您就会知道运行 yarn start 来启动您的 Library 项目，这将以监视模式运行，并在任何组件更新后重建您的库

dist/文件夹将会创建一个包含所有 Tailwind 类的index.css文件！现在，你可以开发组件了，并将它们导入到App.tsx示例代码中进行测试（再次阅读“创建 React 文档”）。

发布和清除

现在让我们来看看你想将你的库发布到 NPM 的部分...嗯， dist/中的超大 CSS不适合发布，这是真正的交易部分

去package.json 文件里做一个超级简单的小技巧！修改每个脚本的 NODE_ENV 值

当我们运行 yarn start 时，我们不想清除 CSS，因为我们需要所有可用的 Tailwind 类来进行开发，但是当我们运行 yarn build 时，我们需要清除 CSS，只留下组件正在使用的类，并降低文件大小

在package.json中更改此内容：

"build": "microbundle-crl --no-compress --format modern,cjs",
"start": "microbundle-crl watch --no-compress --format modern,cjs ",

为了这：

"build": "NODE_ENV=publish microbundle-crl --no-compress --format modern,cjs",
"start": "NODE_ENV=development microbundle-crl watch --no-compress --format modern,cjs ",

当您发布您的库时，它可以在任何导入您的组件和主题的反应项目中使用。

import { Component } from 'your-component-library'
import 'your-component-library/dist/index.css'

请记住，主题可以在应用程序的 app.js 或 index.js 文件中导入一次，无需在每个组件上都执行此操作。

就这样！现在你已经准备好为大家构建精彩的 React 组件了！请开源！:)

链接

创建 React Library
Tailwind CSS
项目

谢谢！

免责声明！如果您使用的是 Windows 电脑（我不知道为什么）。通过脚本设置 NODE_ENV 值可能会失败，只需运行

npm install -g win-node-env

然后再试一次，这应该可以解决问题:)

注意：本文未针对 Tailwind v4 进行更新