TailwindCSS 组件内样式优先级低于index.css,被覆盖，如何调整？

Question

tailwindcss类被覆盖问题

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  corePlugins: {
    preflight: false, // 禁用默认样式
  },
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

main.tsx

import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import '@/design/index.scss'
import './index.css'
import '@ant-design/v5-patch-for-react-19'

// register svg icon
import 'virtual:svg-icons-register'
import React from 'react'
import { ConfigProvider } from 'antd'
import zhCN from 'antd/es/locale/zh_CN'

createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ConfigProvider locale={zhCN}>
      <App />
    </ConfigProvider>
  </React.StrictMode>
)

tailwind版本是4
现在发现的问题是组件内tailwindcss样式会被 @/design/index.scss 的样式覆盖,不知道啥原因，

第一次发文，可能描述的不是十分友好，

希望不覆盖组件内tailwind样式

Answer 1

在社区找到了答案，哈哈哈，实测有效，