只需要设置几个选项就能完成，并且搭配了 tailwindcss 的 color 系统灵活性也非常的好。
背景颜色(color) 语法： background-color:颜色值; 默认的值是 transparent 透明的 背景图片(image...
border-color: #68d391; } .toggle-checkbox:checked + .toggle-label { background: #68d391; } </style> </head> <body> <div class="container mx-auto mt-10 bg-white dark:bg-slate-900 rounded-xl px-6 py-8 shadow-xl" > <h3 class="text-slate-900 dark:text-white font-medium track...
Unify config callback helpers into single object (#5382) Preserve original color format when adding opacity whenever possible (#5154) Add accent-color utilities (#5387) Add scroll-behavior utilities (#5388) Add will-change utilities (#5448) Add text-indent utilities (#5449) Add column utilities...
that we use a custom preset, meaning that our Tailwind equivalents should follow the same structure as what is outlined in Tailwind docs, but the actual names and applied values might differ. For example, all our utilities use thegl-prefix, we use a custom color palette and spacing scale, ...
<link type="text/css" rel="stylesheet/less" href="/color.less"> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"> <style> body, html { background-color: #222f3e; } html[data-theme='dark']{ background-color: #222f3e; } html[data-theme='d...
Text-Color –We can change the color of the text using text-{colorName-value}, here it is “text-orange-300”. Button 3– Rounded Button We can make rounded buttons. Class for this is “rounded-{value}”. Here it’s “rounded-full”. This means border-radius : {some value}; ...
bg-surface-2-light). This is s not a consequence of dark mode, but it adds to the problem since those classes get duplicated too. Wouldn’t it be nice to have a more abstract way to indicate that an element is supposed to be hoverable/clickable and change colors when it’s ...
实践才是最好的老师,通过这段时间的实践,通过不断地思考和优化项目结构、组件,以及功能的实现。尽管这只是一个简单的项目,但我已经不再是简单的复制粘贴,而是把它当成一件新鲜的事物,用来检验自己的学习成果。我发现Tss 非常适合模块化开发,随着熟练度提高用起来也越来越顺手。
(The body selector would serve us just as well.) Then we can use those variables in a selector, in place of our color property values: :root { --primary: #742a2a; // dark red; --secondary: #e53e3e; // medium red } .cta { background-color: var(--primary); color: ...