编辑“︁CSS框架整合”︁（章节）

== 整合方法 ==

=== 1. 顺序加载法 ===
通过控制CSS文件的加载顺序实现样式叠加，后加载的框架会覆盖先加载的同名样式。

<syntaxhighlight lang="html">
<!-- 先加载Bootstrap基础样式 -->
<link rel="stylesheet" href="bootstrap.min.css">
<!-- 后加载Tailwind CSS（通过CDN） -->
<link rel="stylesheet" href="tailwind.min.css">
</syntaxhighlight>

'''效果说明'''：  
当两个框架都定义<code>.btn</code>类时，Tailwind的样式会生效。可通过浏览器开发者工具检查应用顺序。

=== 2. 作用域隔离 ===
使用CSS模块化技术或框架特定前缀隔离样式：

<mermaid>
graph LR
    A[Bootstrap] -->|.bs-* 前缀| C(组件)
    B[Tailwind] -->|.tw-* 前缀| C
</mermaid>

=== 3. 自定义构建 ===
通过构建工具（如Webpack）按需导入不同框架的部分样式：

<syntaxhighlight lang="javascript">
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  require('tailwindcss'),
                  require('autoprefixer')
                ]
              }
            }
          },
          'sass-loader'
        ]
      }
    ]
  }
}
</syntaxhighlight>