后端开发教程 - Java、Spring Boot 实战 - msg200.com
高效的 React + TailwindCSS + Styled Components 工作流程
2020年12月2日通知
动机
我们需要一个 Create React App
从 Create React App 中删除标准样板
创建 tailwind.config.js
创建 Tailwind.css
创建 babel-plugin-macros.config.js
创建 postcss.config.js
更新你的 package.json
创建 App.jsx
干得好，最后的想法
Create-React-App 模板。
2020年12月2日通知
随着 Tailwind 2.0 的发布，本文的大部分内容对于新启动的项目来说可能有些过度。然而，许多公司确实会保留现有版本以确保一致性。
如果您仍在使用 Tailwind 2.0 之前的版本，请继续。否则，我将发布一个涵盖 React 与 Tailwind 2.0 的新工作流程。
动机
许多人欣赏 TailwindCSS 试图解决的问题，但却对如何设计应用程序的样式提出了低级意见。它的代价是冗长的类选择器，往往会超出应用程序的模板逻辑。
另一位 DEV.to 作者@ryanlanciaux写了一篇文章，你可以在这里找到Tailwind 与 React 的结合。这篇文章开启了我疯狂的实验室实验。我被激励着去利用 TailwindCSS 提供的强大工具。
我之前用过的一个 CSS 库 Tachyons，它和 Tailwind 有类似的工具类策略。我实现了一个替代的 Styled Component 概念来管理 Tachyons 提供的工具类。
将 Ryan 的流程与我的 Tachyons 策略相结合，即可形成高效的 TailwindCSS 工作流程。虽然设置过程较为繁琐，但值得为维护简洁的 Tailwind 风格策略付出努力，因为该策略能够随着项目的发展而灵活扩展。
注意： 如果您只想深入了解项目，而不想从头开始构建，请滚动到文章底部并运行 Create React App 模板命令，该命令将构建本文讨论的整个项目及其依赖项。
我们需要一个 Create React App
首先，我们需要全新安装 Create React App。
npx create-react-app my-new-app
cd my-new-app
从 Create React App 中删除标准样板
接下来的说明将帮助您创建以下文件夹树。首先，您需要删除 React 样板文件。logo.svg、index.css，并从和 中App.css删除它们的导入。index.jsApp.js
src
│ ├── App.jsx
│ ├── App.test.js
│ ├── AppStyles.styles.tw.js
│ ├── README.md
│ ├── index.css
│ ├── index.js
│ ├── serviceWorker.js
│ ├── setupTests.js
│ ├── tailwind.config.js
│ └── tailwind.css
我们需要安装其余依赖项以将 Tailwind 与 Styled-Components 放在一起。
npm i --save tailwindcss tailwind.macro@next styled-components babel-plugin-macros postcss-cli autoprefixer
创建 tailwind.config.js
安装软件包后，我们需要初始化tailwind.config.js。我们可以根据项目需求自定义 Tailwind 属性。在本例中，我添加了一些配置，将 Tailwinds 默认的“蓝灰色”色调更改为更平坦的灰度。
npx tailwind init
// ./src/tailwind.config.js
module.exports = {
theme: {
fontFamily: {
display: ["Helvetica", "sans-serif"],
body: ["Helvetica-Neue", "sans-serif"]
},
extend: {
colors: {
gray: {
"100": "#f5f5f5",
"200": "#eeeeee",
"300": "#e0e0e0",
"400": "#bdbdbd",
"500": "#9e9e9e",
"600": "#757575",
"700": "#616161",
"800": "#424242",
"900": "#212121"
}
}
}
},
variants: {},
plugins: []
};
注意：您需要移动tailwind.config.js到.src文件夹。Create React App 会ModuleScopePlugin阻止 Tailwind Macro 和 Babel Macro Plugin 调用tailwind.config.jsfromroot文件夹。有一些方法可以解决这个问题，但问题并不严重或紧急，无需添加这些额外的步骤，只需将配置文件放回即可root。
所有其他不包含的构建格式都可以照常从文件夹中ModuleScopePlugin提供服务。tailwind.config.jsroot
创建 Tailwind.css
tailwind.css在目录中创建以下文件，.src添加调用 Tailwinds 包中的实用程序的基本 Tailwind 变量。
//./src/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
创建 babel-plugin-macros.config.js
我们需要对tailwind-macro包进行寻址以使用 Tailwinds 配置文件。这样我们才能使用tw宏（我们很快就会创建它），并允许 Babel 读取所有 Tailwinds 实用程序。
babel-plugin-macros.config.js在您的文件中创建root并将以下设置复制到文件中。
//./babel-plugin-macros.config.js
module.exports = {
tailwind: {
plugins: ["macros"],
config: "./src/tailwind.config.js",
format: "auto"
}
};
创建 postcss.config.js
最后……我们需要在编译期间指示 PostCSS 使用 Tailwind 和 Autoprefixer。我们稍后会在package.json文件中利用此设置。
将此文件添加到您的根目录。postcss.config.js并将以下设置复制到文件中。
//./postcss.config.js
module.exports = {
plugins: [
// ...
require("tailwindcss")("./src/tailwind.config.js"),
require("autoprefixer")
// ...
]
};
更新你的 package.json
冲刺阶段。将以下脚本添加到您的代码中。package.json这将调用 PostCSS Cli 进行构建，并在您开发过程中实时观察 create-react-app 模块的重新加载更新。它还将自动index.css为您生成代码。
// package.json
"scripts": {
"build:css": "postcss src/tailwind.css -o src/index.css",
"watch:css": "postcss src/tailwind.css -o src/index.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",
}
呼！还在听吗？太棒了。
注意：文件命名规范取决于个人喜好。为了在编辑器中更好地区分，我使用.jsx和扩展名。会显示 React 徽标， 会显示标准 JavaScript 徽标。这有助于区分模板和样式。您可以随意命名文件，使用您觉得最舒服的方式。styles.tw.js.jsx.styles.tw.js
创建 AppStyles.styles.tw.js
让我们首先在.src目录中创建我们的样式组件：让我们开始运行并进行增量更改以确保每个更改都能正常工作。
// ./AppStyles.styles.tw.js
import styled from "styled-components";
export const AppStyles = styled.div.attrs({
className: "w-full h-screen bg-gray-100 p-2"
})``;
创建 App.jsx
我们开始创建模板，将以下代码复制到App.jsx。您会注意到，如果您正在运行应用程序，样式目前略有偏差。我们很快就会修复这个问题。目前我们只有部分 Tailwind 可以运行。
// ./src/App.jsx
import React from "react";
import "./index.css";
import AppStyles from "./AppStyles.styles.tw";
const App = () => {
return (
<AppStyles>
<h1>Greetings Earthling</h1>
<p>
Welcome to your Create-React-App / TailwindCSS / Styled Components
template
</p>
<h2>Resources / Documentation</h2>
<ul>
<li>
<a href="https://reactjs.org/docs/create-a-new-react-app.html">
ReactJS
</a>
</li>
<li>
<a href="https://tailwindcss.com/">TailwindCSS</a>
</li>
<li>
<a href="https://styled-components.com/">Styled Components</a>
</li>
</ul>
</AppStyles>
);
};
export default App;
将“tw”宏添加到 AppStyles.styles.tw.js
砰！目前为止一切运行良好。干得好！现在，让我们添加额外的魔法，扩展使用 Styled Components 隔离的 Tailwind 的强大功能。我们将添加tw变量并tailwind.macro从 NPM 导入库。
AppStyles.styles.tw.js使用下面写的新代码更新您的文件。
// ./src/AppStyles.styles.tw.js
import styled from "styled-components";
import tw from "tailwind.macro";
const AppStyles = styled.div.attrs({
className: "w-full h-screen flex flex-col items-center justify-center"
})`
& {
h1 {
${tw`font-sans text-6xl font-hairline text-6xl text-teal-500`}
}
p {
${tw`text-gray-700 text-lg`}
}
h2 {
${tw`text-2xl font-hairline mt-5 text-teal-500`}
}
ul {
${tw`inline-flex`}
}
li {
${tw`mr-5`}
}
a {
${tw`text-blue-500 hover:text-gray-500 hover:underline`}
}
}
`;
export default AppStyles;
回顾一下我们刚刚添加的内容，此设置现在允许您像使用 Sass 一样嵌套 Tailwind 类。您可以使用类选择器、ID 和 HTML 标签来遍历整个组件模板。它将遵循父容器、每个子容器和/或兄弟容器中的所有项目。非常棒，对吧？
如果您的应用程序当前在后台运行，则需要重新启动它，以便所有配置文件都可以使用 Create React App 进行编译。
完成所有步骤后，您的文件树应如下所示。
您的root目录：
./styled-tailwind
├── .gitignore
├── README.md
├── babel-plugin-macros.config.js
├── node_modules
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
├── src
└── yarn.lock
您的.src文件夹
./src
├── App.jsx
├── App.test.js
├── AppStyles.styles.tw.js
├── index.css
├── index.js
├── serviceWorker.js
├── setupTests.js
├── tailwind.config.js
└── tailwind.css
干得好，最后的想法
以上是大量的设置准备工作。目前，您的设计工作流程有很多选项可供选择。您不仅限于使用 Tailwind CSS 类。在反引号之间，您还可以编写如下所示的普通 CSS。它提供了大量的设计可能性，并且是使用 Tailwind 样式对象尝试复杂动画的绝佳机会。
const AppStyles = styled.div.attrs({
className: "w-full h-screen flex flex-col items-center justify-center"
})`
& {
h1 {
${tw`font-sans text-6xl font-hairline text-6xl text-teal-500`}
transform: scale(1);
transition: all 0.3s ease-in-out;
}
h1:hover {
transform: scale(2);
}
}
`;
Create-React-App 模板。
您无需再重复这些步骤。我已经创建了一个可用于 Create React App 的模板。本文中安装的所有内容都将预先安装，为您的下一个创意火花做好准备。
npx create-react-app my-new-app --template styled-tailwind
cd my-new-app
npm run start