如何在任何 .scss 文件中使用 tailwind 的 @apply 指令，而不是只使用它的 main tailwind 文件（在 React 中）？

Question

我正在对 typescript 和 tailwindcss 做出反应。

我想要的是，不是在主tailwind.css文件（包含 @tailwind base、@tailwind 组件等的文件）中使用@apply指令，我想在任何 .scss 文件中使用它。

例如，每当我创建一个组件时，我都会创建一个文件夹，并在其中创建一个 index.tsx 文件和一个 .scss 文件。我想在该 .scss 文件中使用 @apply 指令。这样，工作和调试将很容易，因为两个关联的文件都在同一个文件夹中。我怎样才能做到这一点？

我在下面展示了我的基本文件夹结构。

文件夹结构：

src > 组件 > 标题 > Header.tsx

import React from "react";
import styles from "./Header.module.scss";

interface Props {}

const Header: React.FC<Props> = (props) => {
  return <div className={styles.headerTag}>Header part here</div>;
};

export default Header;

src > 组件 > Header > Header.module.scss

// what to import so that I can use tailwind like this

.headerTag {
  @apply text-8xl font-bold bg-gray-500;
}

Answer 1

使用工作解决方案创建了一个存储库。
\n如果您的项目基于create-react-app以下步骤来实现这一目标。

\n

为您的项目添加顺风

\n

按照文档中的指南添加tailwind到您的项目中。注意：它们用于修改 CRA webpack 的配置，但我确信您可以对.cracoreact-app-rewired

\n

脚步：

\n

\n
• npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
\n
• npm install @craco/craco
\n
• 在 package.json 中进行这些更改
  \n
\n
• 创建一个名为craco.config.js
\n

\n

// craco.config.js\nmodule.exports = {\n  style: {\n    postcss: {\n      plugins: [\n        require(\'tailwindcss\'),\n        require(\'autoprefixer\'),\n      ],\n    },\n  },\n}\n

\n

\n
• npx tailwindcss-cli@latest init
\n
• 进行这些更改tailwind.config.js
\n
• 包括tailwind在你的index.scss
\n

\n

@tailwind base;\n@tailwind components;\n@tailwind utilities;\n

\n

添加 scss 模块支持

\n

通过安装添加 scss 模块支持npm i node-sass@5.0.0。您可以尝试其他版本，但更高版本不适合我。

\n

就是这样

\n

如果由于某种原因它仍然不适合您，请参阅存储库以了解版本/配置差异，以了解如何更改来处理它。

\n

如果您使用自定义 webpack 构建（或者您的项目不是基于 CRA），则可能需要更多步骤来使用taildwind和scss-modules。

\n

为什么是 postcss@7？

\n

https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

\n

\n

从 v2.0 开始，Tailwind CSS 依赖于 PostCSS 8。由于 PostCSS 8 只有几个月的历史，生态系统中的许多其他工具尚未更新\xe2\x80\x99，这意味着您可能会在安装 Tailwind 并尝试编译 CSS 后的终端：

\n

\n

\n

错误：PostCSS 插件 tailwindcss 需要 PostCSS 8。

\n

\n

\n

Create React App 不支持 PostCSS 8，因此您现在需要安装 Tailwind CSS v2.0 PostCSS 7 兼容性版本，如上面所示的 xe2x80x99 所示。

\n

\n