企业级项目下css处理痛点 - asf - 沸点 - 掘金

1年前

企业级项目下css处理痛点

统一的变量维护困难。
大量的 className 负担。
HTML, CSS分离造成的编写负担。
响应式，主题切换实现复杂。
更多痛点，请看 CSS Utility Classes and "Separation of Concerns"

针对上述问题，我们可以通过 tailwindcss 来进行解决。下面我们来看其具体用法。

安装

yarn add tailwindcss postcss autoprefixer -D
初始化tailwindcss.config.js配置文件，并且也会创建postcss.config.js文件。

// -p 表示创建一个基础的配置文件
npx tailwindcss init -p
// tailwindcss.config.js
/** @type {import('tailwindcss').Config} */
export default {
// tailwindcss 应用的文件范围
content: ['./index.html', './src/**/*.{vue,js}'],
theme: {
extend: {},
},
plugins: [],
}
将加载 Tailwind 的指令添加到你的 CSS 文件中

@tailwind base;
@tailwind components;
@tailwind utilities;
在元素上使用内置类名

#挑战每日一条沸点#

展开

青训营-快乐出发