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

Question

我正在使用react、typescript和tailwindcss。

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

例如，在react中，每当我创建一个组件时，我会创建一个文件夹，并在其中创建一个index.tsx文件和一个.scss文件。 我想在那个.scss文件中使用@apply指令。 这样做将更容易工作和调试，因为两个相关文件将位于同一文件夹中。我该如何实现？？

我已经展示了我的基本文件夹结构如下。

文件夹结构：

src > components > Header > 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;

源代码位置 > 组件 > 标头 > Header.module.scss

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

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

- Ashutosh

---

值得一看，了解如何使用预处理器与TailwindCSS配合使用。请参考[https://tailwindcss.com/docs/using-with-preprocessors#using-sass-less-or-stylus]。 - juliomalves

我已经做过了。但是没有任何东西可以帮助我按照我上面提到的方式编写。我已经花了5-6天来让它工作，但是失败了。现在我正在考虑转换到tachyons-css，因为tachyons-css可以按照我上面提到的方式使用。 - Ashutosh

我现在也面临同样的问题，正在为解决方案苦苦思索。 - curious_coder

顺便说一句，我放弃了使用scss，转而使用现代CSS和Tailwind。 - Keith Nicholas

Answer 1

创建了一个具有可工作解决方案的仓库。
如果你的项目基于create-react-app，请按照以下步骤实现。

将Tailwind添加到您的项目中

按照文档此指南将tailwind添加到您的项目。注意：他们使用craco来修改CRA webpack配置，但我确信您可以使用react-app-rewired做同样的事情。

步骤：

• npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
• npm install @craco/craco
• 在您的package.json文件中进行如下更改
  
• 创建一个名为craco.config.js的文件

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

• npx tailwindcss-cli@latest init - 运行此命令来初始化 Tailwind CSS 。
• 在 tailwind.config.js 文件中进行以下更改：
• 在您的 index.scss 文件中引入 tailwind。

@tailwind base;
@tailwind components;
@tailwind utilities;

添加scss模块支持

通过安装npm i node-sass@5.0.0 来添加scss模块支持。您可以尝试其他版本，但对我来说更高的版本无法正常工作。

就是这样了

如果出于某种原因仍然无法正常工作，请参见 存储库 以获取版本/配置差异的信息，了解需要更改什么以处理它。

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

为什么使用postcss@7？

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

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

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

Create React App尚未支持PostCSS 8，因此您现在需要安装Tailwind CSS v2.0 PostCSS 7兼容性构建，就像我们上面展示的那样。

- nickbullock

---

有没有特别使用 @tailwindcss/postcss7-compat 的原因？这是因为 CRA 被强制使用 v7 吗？请考虑更新帖子，包括重要的配置信息，最好能够理解解决方案，而无需导航到可能不可用的外部链接。 - Estus Flask

Answer 2

似乎为了实现您要寻找的内容，您需要使用一个名为postcss-import插件，并且稍微不同地配置主要的tailwind文件。我创建了一个非常快速的repo来演示设置：Repo链接。

关于此事的官方文档。

基本上，与其只有这个“典型”的tailwind css文件：

@tailwind base;
@tailwind components;
@tailwind utilities;

您需要在postcss.config.js中添加一个依赖项postcss-import。然后更新postcss.config.js以实际使用它：

module.exports = {
  plugins: {
    "postcss-import": {},
    tailwindcss: {},
    autoprefixer: {},
  },
}

并将主CSS文件更改为使用导入的方式来使用tailwind：

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "./components/Header/Header.module.css";
@import "tailwindcss/utilities";

这样您就可以开始创建单独的CSS文件/模块，并像您想要的那样使用它们。

这里是Header.modules.css：

.headerTag {
    @apply bg-green-500 text-8xl;
}

我不确定个人是否更喜欢这种方式，因为我认为tailwind的要点是不使用大量的css组件类，所以我更喜欢只创建几乎带有“内联”样式的React组件:

import React from "react";

interface Props {
    className: string;
}

const Header: React.FC<Props> = (props) => {
  return <div className={`bg-green-500 text-8xl ${props.className}`}>Header part here</div>;
};

export default Header;

这样我就可以在使用的地方覆盖默认样式。

- fxdxpz

Answer 3

因此，另一种实现这个的替代方法可能是这样的：

styles/apply.js

const btn = 'py-2 px-4 font-semibold rounded-lg shadow-md';
const btnGreen = 'text-white bg-green-500 hover:bg-green-700';

export { btn, btnGreen };

pages/index.tsx

import type { NextPage } from 'next';

import { btn, btnGreen } from 'Styles/apply';

const Home: NextPage = () => {
  return (
    <div>
      <button className={`${btn} ${btnGreen}`}>
        Button
      </button>
    </div>
  );
}

- Daltron