传统CSS的问题

在如今项目越来越大的情况下，处理一个庞大且复杂的样式表是相当困难，这些样式就像是一张缠绕在一起的渔网。在嵌套的 CSS 中，微小的改变可能会引起巨大的变化，难以预料进行细微的修改和操作会引起什么？

原子类CSS

原子 CSS 提供了一套直接，明显且简单的方法论。原子类的类目是不可改变的，这使得使用的 css 效果是显著的，可以被依靠的，因为同样的类名，所展现出来的 CSS 的一致的。

.flex{
  display:flex;
}

如上就是一个原子类 flex。
相比于传统 CSS ，原子类的优点是可见的。

• 写法更加简单，降低命名难度，更加规范
• 我们在项目中基本不需要再自己手写 css 代码
• 减少 css 嵌套的问题

当然原子类 css 也不是没有缺点。

• 难以阅读和维护
• 刚开始接触时的记忆苦难

在项目中使用原子类css

tailwindcss

官方文档：www.tailwindcss.cn/docs/instal… tailwindcss 是当下比较流行的原子css框架，可以帮助我们快速使用进行开发。

引入

在终端中输入如下命令：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

然后在 postcss.config.js 中添加如下代码：

// common.js
module.exports = { 
    plugins: { 
        tailwindcss: {}, 
        autoprefixer: {}, 
    } 
}
// es
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

在 tailwind.config.js 配置文件中添加如下配置

// common.js
module.exports = {
  content: ["./src/**/*.{html,js,,tsx,jsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
// es
export default {
  content: ["./src/**/*.{html,js,tsx,jsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

最后在公共的 css 中添加

export default {
  content: ["./src/**/*.{html,js,tsx,jsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

最后即可在文件中使用，如 react 中：

export default function App() {
  return (
    <div className="flex flex-row h-2/5 bg-lime-400">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  );
}