Logo

菜单

发布于 2025-12-08 0 阅读
0

高效的 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 模板。

高效的 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
Enter fullscreen mode Exit fullscreen mode

我们需要安装其余依赖项以将 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: []
};
Enter fullscreen mode Exit fullscreen mode

注意：您需要移动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;
Enter fullscreen mode Exit fullscreen mode

创建 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"
  }
};
Enter fullscreen mode Exit fullscreen mode

创建 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")
    // ...
  ]
};
Enter fullscreen mode Exit fullscreen mode

更新你的 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",
  }
Enter fullscreen mode Exit fullscreen mode

呼！还在听吗？太棒了。

注意：文件命名规范取决于个人喜好。为了在编辑器中更好地区分，我使用.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"
})``;
Enter fullscreen mode Exit fullscreen mode

创建 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;
Enter fullscreen mode Exit fullscreen mode

将“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;
Enter fullscreen mode Exit fullscreen mode

回顾一下我们刚刚添加的内容，此设置现在允许您像使用 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
Enter fullscreen mode Exit fullscreen mode

您的.src文件夹

./src
├── App.jsx
├── App.test.js
├── AppStyles.styles.tw.js
├── index.css
├── index.js
├── serviceWorker.js
├── setupTests.js
├── tailwind.config.js
└── tailwind.css
Enter fullscreen mode Exit fullscreen mode

干得好，最后的想法

以上是大量的设置准备工作。目前，您的设计工作流程有很多选项可供选择。您不仅限于使用 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);
    }
}
`;
Enter fullscreen mode Exit fullscreen mode

Create-React-App 模板。

您无需再重复这些步骤。我已经创建了一个可用于 Create React App 的模板。本文中安装的所有内容都将预先安装，为您的下一个创意火花做好准备。

npx create-react-app my-new-app --template styled-tailwind

cd my-new-app

npm run start

瞧！地球人，你好！

文章来源：https://dev.to/dbshanks/an-efficient-react-tailwindcss-styled-components-workflow-458m
Covid-19 实时洞察 - 艰苦返工
3,000+ 字阐述为何应该使用 ...