如何禁用Tailwind CSS非类选择器样式并隔离Svelte Bundle样式？

方案一：将Tailwind样式完全限定在Svelte Bundle的容器内 #

这个方案会让Tailwind的所有样式（包括基础元素样式）只作用于你指定的容器内部，不会影响PHP项目的全局样式。

1. 修改Tailwind配置，关闭全局基础样式
   在tailwind.config.js中禁用默认的preflight（Tailwind的全局基础样式集合，包含body、h1、table等元素的默认样式）：

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: ['./src/**/*.{svelte,js,ts}'],
     corePlugins: {
       preflight: false,
     },
     theme: {
       extend: {},
     },
     plugins: [],
   }
   

2. 在容器内引入Tailwind全量样式
   在Svelte项目的全局CSS文件（比如src/app.css）中，用目标容器的类名嵌套Tailwind的所有指令，让样式仅作用于容器内部：

   .svelte-bundle-root {
     @tailwind base;
     @tailwind components;
     @tailwind utilities;
   }
   

3. 给Svelte根组件添加容器类名
   在Svelte应用的根组件中，把所有内容包裹在带有上述类名的div里：

   <div class="svelte-bundle-root">
     <!-- 你的Svelte应用内容 -->
   </div>
   

   这样，Tailwind的基础样式（比如h1的字体大小、table的边框）只会影响这个容器内的元素，PHP项目的全局样式不受干扰。

方案二：完全禁用Tailwind的元素选择器样式 #

如果你不需要Tailwind提供的任何基础元素样式，只想用它的工具类和自定义组件类，可以直接关闭preflight，只引入工具类和组件类：

1. 修改Tailwind配置
   同样在tailwind.config.js中关闭preflight：

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: ['./src/**/*.{svelte,js,ts}'],
     corePlugins: {
       preflight: false,
     },
     theme: {
       extend: {},
     },
     plugins: [],
   }
   

2. 调整全局CSS引入
   在全局CSS文件中只引入组件类和工具类，跳过基础样式：

   @tailwind components;
   @tailwind utilities;
   

   这种情况下，Tailwind不会生成任何针对body、h1、table等元素的全局样式，所有样式都需要你通过手动添加Tailwind类名来实现，完全避免和PHP项目的现有样式冲突。

内容的提问来源于stack exchange，提问作者Franz Justin Buenaventura