我找不到一种在将Tailwind CSS包含到一个系统中并且不想全局应用时适用于自定义构建选项的好方法。
本质上，我想要做到这一点：
.tailwind{
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
}
但是PostCSS导入器不喜欢这样做，因为它会在替换tailwind占位符之前进行导入。所以唯一的方法是将构建分为两个阶段，然后像这样导入已编译的css：
.tailwind{
@import "tailwindcss.css";
}
它能够工作，但会破坏某些在开发者工具中显示的CSS规则。
有没有更好的方法来限定Tailwind，以防止其干扰其他系统？
.tailwind {
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind screens;
}
来自官方文档...
prefix选项允许你为所有Tailwind生成的工具类添加自定义前缀。当在现有的CSS上加入Tailwind时可能存在命名冲突时，这将非常有用。
例如，你可以通过设置prefix选项来添加tw-前缀：
// tailwind.config.js
module.exports = {
prefix: 'tw-',
}
我认为这里的棘手之处实际上是关于预先设置/重置.css文件。你想要防止外部样式影响到你的范围，但又不想用Tailwind样式污染外部系统。
我的当前设定包括以下步骤：
tw-，并添加一个额外的选择器#app。最后一项更改将在输出中添加一个额外的CSS选择器，例如：#app .tw-mb-4。module.exports = {
important: '#app',
prefix: "tw-",
corePlugins: {
preflight: false,
},
base.css从node_modules文件夹中找到并复制内容之前，请使用父选择器#app将其粘贴到scss文件中。您可以使用任何在线SCSS编译器进行编译。这将帮助您仅在范围内重置样式。#app {
/*content from base.css*/
}
复制 #2 编译后的样式，粘贴到你的 Tailwind CSS 文件开头。
在 HTML 中，将你的内容包裹在一个 id 名为#app的 div 元素中。
Tailwind 的 important 选项似乎不会在 @layer component 中添加选择器，因此你需要在组件样式中包含它。
@layer components {
#app .page-h1 {
@apply tw-mt-0 tw-mb-2 tw-text-center tw-leading-8 tw-text-4xl md:tw-text-5xl;
}
}
按照要求，我的回答如下：
我使用了Lanny建议的前缀。
// tailwind.config.js
module.exports = {
prefix: 'tw-',
}
然后我按照以下方式编写了我的 tailwind css 文件：
@import "tailwindcss/components";
@import "tailwindcss/utilities";
然后我手动将想要的任何基础样式复制到我的主css文件中，并手动更改任何冲突的内容。
您可以通过在tailwind配置文件中设置important到您的父类或ID来实现这一点。请参见文档。
// tailwind.config.js
module.exports = {
important: '.tailwind',
}不幸的是，这似乎只影响了组件和实用样式... 基础样式将保持不变。
important: true 吗？这会将 important 添加到所有属性中，但对于作用域尾风没有任何帮助。这只会让情况变得更糟。 - Guerrillaimportant: true 只会在所有样式中添加 !important。但是，将 important 值设置为字符串将添加作用域。例如，important: '.tailwind' 将把 .p-10 { ... } 这样的实用程序转换为 .tailwind .p-10 { ... }。 - Cyrus Korn这似乎适用于WordPress管理界面，但确实删除了标准化，例如按钮悬停时的cursor: pointer。如果您想完全禁用Preflight - 可能是因为您正在将Tailwind集成到现有项目中或者因为您想提供自己的基本样式 - 您需要在tailwind.config.js文件的corePlugins部分中将preflight设置为false。
module.exports = {
prefix: 'tw-',
content: [
"./src/**/*.{html,ts}",
],
theme: {
extend: {},
},
purge: {
enabled: true,
content: ['./src/**/*.{html,ts}']
},
plugins: [],
corePlugins: {
preflight: false,
}
}
这将减小构建大小，因为我已经清除了 CSS，禁用了全局 CSS，因为我使用了预飞检，现在如果您想应用 tailwind 类，请使用
<div class="tw-m-4"></div>
由于我们使用了tw作为前缀
我已经创建了一个 vite 插件来解决这个问题。
import scopeTailwind from "vite-plugin-scope-tailwind";
export default defineConfig({
...
plugins: [
...
scopeTailwind(), // or scopeTailwind({ react: true }) for a React app
...
],
...
});
https://github.com/dolanmiu/vite-plugin-scope-tailwind
注意：本答案适用于那些确实需要通过CSS选择器来限定Tailwind样式，而不能使用Tailwind配置中的前缀或important特性的人。此外，本答案还涵盖了使用Javascript将CSS导入到应用程序的场景。
基于事实，Vite / Tailwind在构建过程中阻止了对@Luud Janssen方法的支持，会记录下面的文本：
Nested @tailwind rules were detected, but are not supported. Consider using a prefix to scope Tailwind's classes...
import tailwindFile from '@/core/assets/tailwind/tailwind.css?inline';
import { compileString } from 'sass';
const tailwindScoped = compileString(`.scope { ${tw} }`).css;
最后，我在模板中使用它在style HTML标签中。顺便说一下，Vue禁止使用该标签，所以还有一个解决方法来实现这个：
<component :is="'style'">
{{ tailwindScoped }}
</component>
import 'tailwindcss/tailwind.css'添加到我的main.js中。更改postcss.config.js以包括postcss-nested插件。在我的根App.vue中添加<style lang="scss">#app {@tailwind base; @tailwind components; @tailwind utilities; @tailwind screens;}</style>。 - Chuck Taylor