如何使用自定义CSS覆盖TailwindCSS，仅保留所需的特定类？

你可以通过修改tailwind.config.js配置项完成需求，具体步骤如下：

1. 禁用不需要的核心插件 #

Tailwind所有默认工具类都由内置核心插件生成，你可以通过corePlugins配置项仅保留需要的插件，其余所有默认类会自动禁用：

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 仅保留你需要用到的功能对应的插件名，未列出的插件默认禁用
  corePlugins: [
    'flex',
    'padding',
    'margin',
    'fontSize'
  ],
  // 其余配置项
}

如果你需要先全局禁用所有核心插件，再单独引入需要的功能，也可以写成：

module.exports = {
  // 禁用所有默认核心插件
  corePlugins: false,
  plugins: [
    require('tailwindcss/lib/plugins/flex'),
    require('tailwindcss/lib/plugins/padding')
    // 按需引入需要的插件即可
  ]
}

2. 关闭默认全局重置样式 #

Tailwind默认会注入名为Preflight的全局基础样式，会重置浏览器默认样式，如果你不需要该功能，可以直接关闭：

module.exports = {
  preflight: false,
  // 其余配置项
}

3. 可选：设置类名前缀避免冲突 #

如果你担心保留的Tailwind类名和自己编写的CSS类名冲突，可以给所有Tailwind生成的类添加统一前缀：

module.exports = {
  prefix: 'tw-',
  // 配置后所有Tailwind类都会带tw-前缀，比如tw-flex、tw-p-4，完全不会和自定义类冲突
}

额外说明 #

• 如果仅需要禁用某类功能的默认值，比如默认色板、默认间距，可以单独在theme配置项中将对应属性设置为空对象：

  module.exports = {
    theme: {
      colors: {}, // 禁用所有默认颜色类，仅保留你自定义的颜色配置
    }
  }
  

• 修改配置后需要重启本地开发服务，保证配置生效。

内容的提问来源于stack exchange，提问作者Milind Goel