第二,传统 CSS 框架通过“覆盖”进行定制。一般来讲,健康的做法是覆盖框架提供的变量,但是定制能力很...
组件化出现之前,无论你的 CSS 再复杂,终究全局共享同一张样式表,只要 class 名字相同,就可以复用样式。但在组件化出现之后,为了避免不同组件间 class 名字的冲突,我们往往会使用CSS modules、Scoped CSS等方式规避,这反而对不同组件间复用样式造成了阻碍。 再考虑一个很现实的因素。在实际项目中,不同的需求总是...
原子化CSS本身的概念和 Tailwind CSS、UnoCSS[2]设计都比较简单,这里主要想聊一下在现代前端中,原子化CSS到底是不是完美的解决方案,是不是解决CSS问题的正确方向。 概念-原子化CSS 原子化 CSS 是一种 CSS 的架构方式,它倾向于小巧且用途单一的 class,并且会以视觉效果进行命名。 听起来厉害,但实现的最终方式超...
现在项目开发用的 TailwindCSS,在这里谈一点感受,TailwindCSS 因为一个 class 代表一个 CSS 属性这种原子化 CSS (Atomic CSS),这种细粒度的 CSS 方案备受争议。 1、四种粒度 复制 Click Click Click <Button> Click </Button> 1. 2. 3. 4. 越往下封装的粒度就越大,越抽象,灵活性就越低,但是灵活...
在 HTML class 中描述样式,内容和样式就有了强耦合。场景、优势、劣势也很明确,这部分和 CSS vs ...
ChitChatYou have a new message! 前天学习创建一个next.js项目的时候,我承认看到app/page.tsx这个首页文件className里写的密密麻麻的 Tailwind,感觉很不优雅(代码我已经删了,但最长的绝对是"p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4"这样的三倍) ...
使用CSS variables 是实现换肤最方便的方案,按传统的方案就得加入一些css class 就可以实现,如: :root{ --page-bg:#fff; --card-bg:#F9FAFB;/* gray-50 */ --title-color:#111827;/* gray-900 */ --desc-color:#4B5563;/* gray-600 */ ...
When using NavLink it's add class active to link but not active state in tailwindcss The simplest way is to use custom variant like this <NavLink to={``} className={'[&.active]:text-indigo-500}> </NavLink> This way is both pure css and takes advantage of the power of tailwindcss...
What I'm trying to do - create a reusable component that passes values into an extended background image class. The issue - the background image is not appearing until after I first run the jsx with hardcoded classes of each background image My tailwindcss config : theme: { extend: { ...
daisyUI虽然是TailwindCSS插件,但是却有一点“反”TailwindCSS的意思,如果我们想要实现一个按钮,使用TailwindCSS的写法如下: Button 而使用daisyUI的代码如下: Button 上面的代码实现了了一个按钮,可以明显看后者比前者更节省代码。 顽强的适用性 daisy是一个纯净的CSS组件,它几乎适用于所有的前端开发场景,我在官网截了...