时间戳

首页 > 解决方案 > 如何在任何.scss 文件中使用tailwind 的@apply 指令，而不是仅使用它的主tailwind 文件（在React 中）？

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

问题描述

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

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

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

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

文件夹结构：

src > 组件 > 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;

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

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

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

标签： reactjssasspreprocessortailwind-csspostcss

解决方案

创建了一个带有工作解决方案的仓库。
如果您的项目基于create-react-app以下步骤来实现。

为您的项目添加顺风

按照文档中的本指南添加tailwind到您的项目中。注意：它们用于修改 CRA webpack 的配置，但我相信你可以对.cracoreact-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.config.js 改变在
  • 包括tailwind在你的index.scss
@tailwind base;
@tailwind components;
@tailwind utilities;

添加 scss 模块支持

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

而已

如果由于某种原因它仍然对您不起作用，请参阅版本/配置差异的存储库，以了解要更改什么来处理它。

如果您正在使用自定义 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 兼容性版本，如上所示。

推荐阅读