如何移除TailwindCSS构建产物中的基础样式，仅保留指定类

问题描述 #

我的项目使用带有sd-类前缀的TailwindCSS，执行构建命令npx tailwindcss -o ./dist/css/vue3-datatable.css后，生成的CSS文件包含两部分内容：

• PART #1：Tailwind默认的基础重置样式
• PART #2：项目实际用到的带sd-前缀的自定义类样式

我需要构建后的CSS仅保留PART #2部分，该如何实现？

解决方案 #

通过修改Tailwind配置文件，禁用默认的基础样式和预重置样式即可达成需求：

1. 编辑tailwind.config.js配置文件
   在配置中添加corePlugins选项，关闭preflight（Tailwind的默认重置样式）和base（默认基础元素样式）：

/** @type {import('tailwindcss').Config} */
module.exports = {
  prefix: 'sd-', // 你的自定义类前缀
  corePlugins: {
    preflight: false,
    base: false,
  },
  // 保留你原有的content、theme等配置
  content: [
    './src/**/*.{vue,js,ts,jsx,tsx}',
    // 其他需要扫描的文件路径
  ],
  // ...其他配置
}

2. 重新执行构建命令

npx tailwindcss -o ./dist/css/vue3-datatable.css

执行完成后，生成的CSS文件就只会包含项目中用到的带sd-前缀的自定义类样式，不再包含默认的基础重置内容。

注：如果还有其他不需要的Tailwind核心插件，也可以在corePlugins中继续设置为false来禁用，但针对当前需求，关闭preflight和base已足够。

内容的提问来源于stack exchange，提问作者Syamsoul Azrien