tailwindcss的配置-Using with Perprocessors我们平时在使用# Tailwind CSS

我们平时在使用# Tailwind CSS的时候它的一些核心概念和配置不知道大家看了没？虽然提供了中文文档，但是半中半英很难受！

这段时间有空，# Tailwind CSS的配置都撸了一遍，以及在项目中的具体应用：

tailwindcss插件：

构建时导入 (Build-time imports)

当你写CSS时，可能会希望把相关的样式放到不同的文件中，这样更容易管理和维护。但是，如果你直接在CSS文件中使用@import语句来引入其他CSS文件，浏览器在加载页面时会一个一个地去请求这些文件，这可能会减慢页面的加载速度。

预处理器（比如Sass、Less等）可以在你构建项目（比如编译成最终的CSS文件）之前，就帮你把这些@import语句处理掉，把所有的CSS代码合并到一个文件中。这样，浏览器就只需要加载一个文件，页面加载速度就会更快。

而postcss-import这个插件，就是专门为PostCSS提供这种功能的。如果你在使用Tailwind CSS，并且想要享受这种组织CSS文件的好处，但又不想使用Sass、Less等预处理器，那么你就可以使用postcss-import插件。

要使用它，请通过 npm 安装插件：

npm install -D postcss-import

然后将其添加为 PostCSS 配置中的第一个插件：

// postcss.config.js
module.exports = { 
        plugins: { 
            'postcss-import': {},
            tailwindcss: {},
            autoprefixer: {},
            } 
        }

关于 postcss-import 需要注意的一件重要事情是，它严格遵守 CSS 规范，并且不允许在文件最顶部以外的任何地方使用 @import 语句。

❌不起作用，@import 语句必须放在前面

/* components.css */ 
.btn { padding: theme('spacing.4') theme('spacing.2'); 
/* ... */ } /* Will not work */ 
@import "./components/card";

解决此问题最简单的方法是永远不要将常规 CSS 和导入混放在同一个文件中。相反，为导入创建一个主入口文件，并将所有实际 CSS 放在单独的文件中。

👌使用单独的文件来导入业务中的 css:

/* components.css */ 
@import "./components/buttons.css";
@import "./components/card.css";

/* components/buttons.css */ 
.btn { padding: theme('spacing.4') theme('spacing.2'); /* ... */ }

/* components/card.css */ 
.card { padding: theme('spacing.4'); /* ... */ }

如果你的主CSS文件里包含了@tailwind声明，那么你可能需要考虑将它们拆分到单独的文件中去，以便更好地组织你的CSS代码

❌不起作用，@import 语句必须放在前面

@tailwind base; 
@import "./custom-base-styles.css";
@tailwind components;
@import "./custom-components.css"; 
@tailwind utilities;
@import "./custom-utilities.css";

当你使用Tailwind CSS时，你可能会在你的主CSS文件中写下@tailwind的声明，比如@tailwind base;、@tailwind components;和@tailwind utilities;。这些声明是Tailwind CSS的一部分，它们告诉Tailwind你想要在你的项目中包含哪些基础样式、组件样式和工具类样式。

但是，为了让你的CSS代码更加整洁和易于管理，你可以考虑将每个@tailwind声明放到一个单独的文件中。这样，你的主CSS文件就会变得更加简洁，而每个单独的文件则可以专注于包含与@tailwind声明相关的样式。

Tailwind CSS已经为你考虑到了这一点，所以它提供了一个开箱即用的解决方案：它已经将每个@tailwind声明拆分成了单独的文件，并且这些文件被放置在了node_modules/tailwindcss文件夹中（假设你已经通过npm或yarn安装了Tailwind CSS）。

【说人话】你可以通过将每个@tailwind声明放到单独的文件中，并在你的主CSS文件中使用@import语句（配合postcss-import插件）来导入这些文件，从而更好地组织你的CSS代码。

@import "tailwindcss/base"; 
@import "./custom-base-styles.css"; 

@import "tailwindcss/components";
@import "./custom-components.css";

@import "tailwindcss/utilities";
@import "./custom-utilities.css";

嵌套（Nesting）

如果你想在项目中支持CSS的嵌套声明（也就是在一个选择器内部再嵌套其他选择器来定义样式），他们推荐你使用一个叫做tailwindcss/nesting的插件。这个插件其实是一个PostCSS的插件，它内部封装了另一个叫做postcss-nested或postcss-nesting（这两个可能是不同版本或略有差异的插件）的插件，并且它起到了一个兼容层的作用，确保你选择的嵌套插件能够正确地理解Tailwind CSS的特殊语法。

重要的是，这个tailwindcss/nesting插件已经包含在了Tailwind CSS的包里面了。所以，如果你想使用这个功能，你不需要单独去安装另一个插件，只需要在你的PostCSS配置文件中添加对tailwindcss/nesting的引用，并且要确保这个引用在Tailwind CSS的引用之前。

【说人话】

Tailwind CSS提供了一个支持嵌套声明的插件。

这个插件已经包含在Tailwind CSS的包里了。

你只需要在你的PostCSS配置里添加这个插件的引用，并确保它在Tailwind CSS之前，就可以使用嵌套声明的功能了。

// postcss.config.js 
module.exports = { 
    plugins: { 
         'postcss-import': {},
         'tailwindcss/nesting': {},
         tailwindcss: {},
         autoprefixer: {},
       } 
     }

默认情况下，它在后台使用postss-nested插件，该插件使用类似Sass的语法，并且是在Tailwind CSS插件API中提供嵌套支持的插件。如果你更喜欢使用postcss嵌套（基于标准CSS嵌套规范），请先安装插件：

npm install -D postcss-nesting

然后将插件本身作为参数传递给PostCSS配置中的tailwindcss/resting：

// postcss.config.js
        module.exports = { 
            plugins: { 
                'postcss-import': {},
                'tailwindcss/nesting': 'postcss-nesting',
                tailwindcss: {},
                autoprefixer: {},
            } 
          }

首先，如果你出于某种特殊原因需要使用一个特定版本的postcss-nested插件（这是一个用于支持CSS嵌套规则的PostCSS插件），并且这个版本和我们与tailwindcss/nesting一起打包的版本不同，那么你可以通过一些配置来覆盖我们提供的版本。这样，你就可以在你的项目中使用你需要的那个特定版本的postcss-nested了。

然后，如果你的项目中正在使用postcss-preset-env（这是一个预置了多种PostCSS插件的集合，用于简化配置），你应该确保关闭它自带的嵌套功能。因为当你使用tailwindcss/nesting时，这个插件已经为你处理了嵌套的相关工作，所以不需要postcss-preset-env再插一脚了。换句话说，你应该让tailwindcss/nesting来全权负责处理CSS的嵌套声明，而不是让postcss-preset-env也参与进来。

说人话

如果你需要使用特定版本的postcss-nested，你可以通过配置来覆盖tailwindcss/nesting自带的版本。

如果你用了postcss-preset-env，记得关掉它的嵌套功能，让tailwindcss/nesting来处理嵌套。

// postcss.config.js 
module.exports = { 
    plugins: { 
        'postcss-import': {},
        'tailwindcss/nesting': 'postcss-nesting',
         tailwindcss: {},
        'postcss-preset-env': { features: { 'nesting-rules': false },
        },
    }
}

变量（Variables）

现在CSS变量（官方称为自定义属性）在各大浏览器中都已经得到了很好的支持。因此，你不需要再使用CSS预处理器（如Sass、Less等）来使用变量了。

简单来说，CSS变量允许你在CSS中定义一个值，然后在整个样式表中重复使用这个值，而不需要每次都手动写出这个值。这样做的好处是，如果你想要修改这个值，你只需要在定义变量的地方修改一次，所有使用这个变量的地方都会自动更新。

在过去，为了使用变量，我们可能需要使用CSS预处理器，比如Sass或Less。这些预处理器允许我们使用类似编程的方式来编写CSS，包括定义变量、嵌套规则、函数等。但是，现在原生CSS已经支持变量了，所以我们不再需要依赖这些预处理器来使用变量功能了。

:root { 
    --theme-color: #52b3d0;
    } 
/* ... */ 
.btn { 
    background-color: var(--theme-color); 
/* ... */ 
    }

在Tailwind CSS框架内部，我们大量使用了CSS变量（也就是自定义属性）。所以，如果你能够使用Tailwind CSS，那就意味着你也可以直接使用原生的CSS变量。

此外，你可能会发现，过去你使用变量来做的很多事情，现在都可以用Tailwind的theme()函数来替代。这个函数允许你直接在你的CSS代码中访问tailwind.config.js文件里定义的所有设计变量（也称为设计标记）。

说人话

Tailwind CSS自己就用了很多CSS变量，所以如果你用Tailwind，那你也能用CSS变量。

你可以用Tailwind的theme()函数来替换过去用变量做的很多事情，这个函数可以让你在CSS里直接用到tailwind.config.js里定义的设计变量。


.btn { 
    background-color: theme('colors.blue.500');
    padding: theme('spacing.2') theme('spacing.4'); 
    /* ... */
}

如果想深入了解theme()函数 functions and directives documentation。

css属性前缀（vendor prefixes）

为了自动管理 CSS 中的供应商前缀，您应该使用 Autoprefixer.

要使用它，请通过 npm 安装它:

npm install -D autoprefixer

然后将其添加到 PostCSS 配置中的插件列表的最末尾：


module.exports = { 
plugins: { 
    tailwindcss: {}, 
    autoprefixer: {},
    } 
 }

使用 Sass、Less 或 Stylus(Using Sass,Less or Stylus)

为了让你的开发体验更棒，我们非常建议你只在Tailwind项目中使用PostCSS，而不要使用像Sass或Less这样的CSS预处理器。

但如果你确实想在Tailwind项目中使用Sass、Less或Stylus这样的预处理工具，那你需要在项目中添加一个额外的构建步骤。这个步骤的作用是让预处理后的CSS再经过PostCSS的处理。如果你的项目中已经在使用Autoprefixer（一个自动为CSS属性添加浏览器前缀的PostCSS插件），那你可能已经设置好了类似的流程。

想要了解更多关于如何将Tailwind作为PostCSS插件集成到你现有的构建流程中，可以查阅我们的相关文档。

关于在Tailwind中使用预处理器，最重要的一点是：像Sass、Less和Stylus这样的预处理器是在Tailwind之前独立运行的。这意味着，例如，你不能将Tailwind的theme()函数的输出作为Sass颜色函数的输入，因为theme()函数实际上是在Sass编译成CSS并送入PostCSS之后才被评估的。

说人话：

我们建议你只在Tailwind项目中使用PostCSS。

如果你想在Tailwind项目中使用预处理工具，需要添加一个额外的构建步骤来让预处理后的CSS再经过PostCSS处理。

预处理器是在Tailwind之前运行的，所以你不能直接将Tailwind的theme()函数的输出用在预处理器中。

❌ 不起作用，首先处理 Sass

.alert { background-color: darken(theme('colors.red.500'), 10%); }

除此之外，一些预处理器在与 Tailwind 一起使用时会出现一些怪异，下面概述了解决方法。

Sass

当将 Tailwind 与 Sass 结合使用时，将 !important 与 @apply 结合使用需要您使用插值才能正确编译。

.alert { @apply bg-red-500 !important; }

👌使用插值作为解决方法

.alert { @apply bg-red-500 #{!important}; }

除此之外，除非用括号括起来，否则 Sass 在使用 Tailwind 的 screen() 函数时会出现问题。

❌ 不起作用，Sass 将生成错误

@media screen(md){ 
    .foo { 
        color: blue;
     }
}

👌将 screen() 函数括在括号中

@media (screen(md)) {
.foo { 
    color: blue;
    }
}

从技术上讲，这会导致媒体查询周围出现一组额外的括号，但它仍然有效。

Stylus

在Tailwind和Stylus一起使用时，如果你想用@apply来复用Tailwind的样式类，你得用@css把相关的CSS规则包起来，这样Stylus就不会去干扰这些规则了。

❌ 当你尝试在Stylus中使用Tailwind的@apply功能时，Stylus可能无法识别这个指令，因为它不是Stylus原生支持的。Stylus会报错或发出警告，告诉你它不理解@apply是做什么的。

这通常意味着你需要找到一种方法，让Stylus能够忽略或正确处理@apply指令，或者考虑不使用Stylus，而只使用Tailwind和PostCSS的组合。

.card {
    @apply rounded-lg bg-white p-4 
}

👌当你在Stylus文件中遇到一些Stylus无法识别或不应该由Stylus处理的代码（比如Tailwind的@apply指令）时，你可以把这些代码放在一个@css块里。这样，Stylus就会跳过这个块，不会尝试去解析或修改里面的内容，而是直接把它当作普通的CSS来处理。

@css { 
    .card { 
        @apply rounded-lg bg-white p-4 
        } 
    }

当你把代码放在@css块里时，虽然Stylus不会干扰这部分代码，但你也因此失去了在Stylus中使用变量、函数、嵌套规则等强大功能的机会。@css块里的代码就像是普通的CSS一样，只能使用CSS的原生语法，而不能享受Stylus提供的额外功能。

所以，这是一个权衡：如果你需要在Stylus中使用Tailwind的@apply等功能，并且不想受到Stylus的干扰，你可以使用@css块；但这样做意味着你将无法在该块内使用Stylus的任何高级特性。

✔ 使用 theme() 代替 @apply

.card { 
    border-radius: theme('borderRadius.lg');
    background-color: theme('colors.white');
    padding: theme('spacing.4'); 
  }

除此之外，除非使用插值并将其括在括号中，否则 Stylus 在使用 Tailwind 的 screen() 函数时会出现问题。

❌ 不起作用，Stylus 将生成错误

    @media screen(md) { 
        .foo { color: blue;
       }
   }

✔ 使用插值和括号作为解决方法

@media ({'screen(md)'}) { 
    .foo { color: blue;
    }
}

从技术上讲，这会导致媒体查询周围出现一组额外的括号，但它仍然有效。

tailwindcss的配置-Using with Perprocessors