Tailwind是实用程序优先的CSS框架，用于快速构建自定义设计。可以单独使用它来设置React Apps的样式。但是，最好将其与样式化组件结合使用。这种结合将Tailwind的魔力带入了CSS-in-Js。
在本指南中，我们将构建表单组件，而无需使用Tailwind CSS和样式化组件编写一行CSS。
让我们潜入吧！
最初发布在我的博客上
为什么要使用它？
“为什么”非常合法且重要，因为我们可以使用Tailwind CSS或样式化组件，那么为什么要将它们组合并同时使用呢？
好吧，Tailwind类可能很长，这将导致我们的组件出现一些可读性问题，并且使它们难以维护。
对于样式化组件而言，除了必须编写样式这一事实外，没有任何问题。但这不是问题，但是，为什么我们要编写Tailwind已经提供的东西呢？
因此，结合使用Tailwind CSS和样式化组件是合理的。
Tailwind CSS有助于实用程序类，而Styled Components借助CSS-in-JS使我们的组件保持清洁。
配置
在本指南中，我们将构建一个简单的表格作为示例。为此，我们需要一个新的React应用程序。
因此，让我们在终端中运行以下命令。
npx create-react-app react-styled-tailwind
接下来，按照以下步骤构建文件夹：
├── src
| ├── App.js
| ├── App.test.js
| ├── assets
| | └── tailwind.css
| ├── index.js
| ├── serviceWorker.js
| ├── setupTests.js
| └── styles
| └── index.js
├── tailwind.config.js
├── babel.plugin.js
├── package.json
├── postcss.config.js
├── README.md
├── yarn-error.log
└── yarn.lock
我将在进行过程中解释每个文件，但现在，让我们安装依赖项。
yarn add -D tailwindcss tailwind.macro@next autoprefixer babel-plugin-macros postcss-cli
接下来，通过运行此命令来安装样式化组件。
yarn add styled-components
安装这些库之后，我们现在可以转到Tailwind CSS的配置
配置Tailwind CSS
要配置它，我们必须手动添加一个配置文件或运行以下命令以生成一个新文件。
npx tailwind init src/tailwind.config.js
在这里，不必在根目录上生成配置文件，而必须将其放在src文件夹中，否则Tailwind Macro将引发错误。
生成的文件将如下所示。
tailwind.config.js
module.exports = {
theme: {
extend: {},
},
variants: {},
plugins: [],
}
如您所见，由于没有配置，因此配置文件为“空”。对于本教程，我们不需要在此处进行任何配置，但是，您可以根据需要对其进行自定义，或者运行带有--full选项的命令以获取完整的Tailwind配置。
接下来，我们需要postcss.config.js在根目录中创建一个新文件。
postcss.config.js
module.exports = {
plugins: [
require("tailwindcss")("./tailwind.config.js"),
require("autoprefixer"),
],
}
此配置告诉文件在编译时postcss.config.js使用Tailwind CSS库和该tailwind.config.js文件，并借助autoprefixer跟踪哪些属性需要添加前缀。
通过该设置，我们现在可以移至该babel.plugin.js文件，该文件有助于将Tailwind类转换为CSS-in-JS代码。
babel.plugin.js
module.exports = {
tailwind: {
plugins: ["macros"],
config: "./tailwind.config.js",
format: "auto",
},
}
稍后我们将在实际操作中看到该文件的功能，但是现在，请记住，它是Tailwind CSS和样式化组件之间的粘合剂。
仅需完成最后三个步骤即可完成设置。
首先，在tailwind.css文件中，我们需要从Tailwind库中导入一些实用程序。
src/assets/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
如您所见，这里没有什么幻想，只有一些导入使我们能够使用Tailwind实用程序类。
第二步是将我们的React App与Tailwind CSS连接起来。
index.js
import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
import "./assets/styles.css"
import * as serviceWorker from "./serviceWorker"
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
)
serviceWorker.unregister()
在这里，我们导入assets/styles.css其中包含CSS样式。稍后，我们将稍微调整默认脚本以构建CSS并将其assets/styles.css在编译期间添加到文件中。
最后但并非最不重要的一点是，我们必须更新package.json文件。
package.json
"scripts": {
"build:css": "postcss src/assets/tailwind.css -o src/assets/styles.css",
"watch:css": "postcss src/assets/tailwind.css -o src/assets/styles.css",
"start": "npm run watch:css & react-scripts start",
"build": "npm run build:css react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
这两个脚本build:css和watch:css将分别建立更改CSS和手表，并在需要重建。正如我之前所说，输出文件将位于assets文件夹中。
有了这一更改，我们现在可以在应用程序中使用Tailwind。现在，将其与样式化组件结合起来。
Tailwind CSS +样式化的组件
之前，在我们的结构文件夹中，我们有一个styles文件夹，是时候使用以下代码对其进行调整了。
styles/index.js
import styled from "styled-components"
import tw from "tailwind.macro"
const StyledForm = styled.main.attrs({
className: "flex flex-col h-screen justify-center items-center bg-gray-100",
})`
& {
form {
${tw`bg-white text-center rounded py-8 px-5 shadow max-w-xs`}
}
input {
${tw`border-gray-300 mb-4 w-full border-solid border rounded py-2 px-4`}
}
button {
${tw`bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 border border-blue-700 rounded`}
}
}
`
export default StyledForm
我们从导入开始，tw这允许我们在嵌套属性中使用Tailwind类。将实用程序类与className属性一起使用是完全可以的，但如果要嵌套属性，则必须使用该tailwind.macro库。
该库将使用babel插件宏config（babel.plugin.js）将嵌套选择器使用的Tailwind CSS实用程序类转换为样式化组件可以理解的可读代码。
在下面的示例中，请参见转换的完成方式。
// input
const test = ${tw`text-center bg-red w-full`}
// output
const test = {
background: 'red',
textAlign: 'center',
width: '100%'
}
大！现在，我们已经完成了将Tailwind与样式化组件组合在一起的工作，让我们将样式化组件添加到App.js文件中。
App.js
import React from "react"
import StyledForm from "./styles"
function App() {
return (
<StyledForm>
<form>
<input type="text" placeholder="Full name" />
<input type="text" placeholder="Email" />
<input type="text" placeholder="Password" />
<button>Sign In</button>
</form>
</StyledForm>
)
}
export default App
在这里，我们只是导入了样式化的组件，并用它包装了所有东西，以使我们的表单看起来不错。
大！您已经了解了这种组合的强大功能。我们已经构建了一个表单组件，而没有编写一行CSS，并且该组件仍然可读。
结论
设置Tailwind CSS有点麻烦，但是，一旦完成并结合到CSS-in-JS，它确实非常强大和灵活，因为我们可以根据tailwind.config.js需要自定义文件或像平常一样编写普通CSS与样式化的组件。在您的下一个React应用中需要考虑这一点。
谢谢阅读！
阅读更多文章 – 订阅我的新闻通讯 – 在Twitter上关注我
