exports = { theme: { extend: { colors: { primary: { DEFAULT: 'var(--primary-color)', 100: 'var(--primary-color-100)', }, }, textColor: { white: '#123456', } }, }, ... } 上面讲 预设Presets 时提到,在没自定义预设的情况,TailwindCss 会将默认配置作为预设,因为这里没有对 ...
使用Tailwind 时,也可以结合 CSS 变量来实现更灵活的设计。例如,定义一个颜色变量,并在 Tailwind 中使用: :root { --primary-color: #3490dc; } .btn { @apply bg-[var(--primary-color)] text-white font-bold py-2 px-4 rounded; } Custom Button 总结 Tailwind CSS 是一个强大且灵活的工具...
Tailwind CSS是一个出色的前端CSS框架，以其独特的特点和优势而闻名。Tailwind CSS与其他传统的CSS框架不...
我们首先用了如下几个功能类:bg-gray-800 text-white p-2 m-2 rounded-lg。如果你用过 bootstrap 的话,那么你应该对这种写法很熟悉了。如果没用过,那么其实就是普通的 css 类,在 F12 里查看样式,就能看到。tailwind 里定义了一套常用的类给我们使用,像例子中 bg-gray-800表示背景颜色(background-color)为...
Tailwind CSS 是一个用于构建现代、响应式Web界面的CSS框架。与传统的CSS框架不同,Tailwind 不提供预定义的组件,而是专注于提供一组小而灵活的原子类。开发者可以根据需要组合这些原子类,构建出符合设计规范的界面。 Tailwind CSS 背后的理念是关注实用性。这意味着 Tailwind CSS 提供低级实用程序类,而不是预定义组件...
color: #333; /* ... */ } Good old fashioned title <!-- with TailwindCSS --> Want to dig deeper into Tailwind? 如果你像我一样,你会持怀疑态度,但相信我,它是有效的。通过简单地查看代码来理解组件的外观会更好更快。此外,如果你从事中型...
Tailwind CSS v2.0是有史以来的第一个主要更新，其中包括：全新的调色板，具有220种总颜色以及用于构建自己的配色方案的新工作流程支持暗模式，启用暗模式后，动态更改设计比以往更加轻松2XL超宽断点，用于1536px及以上的设计新的大纲环实用程序，几乎就像使outline-radius真品一样好实用程序友好的表单样式，一种新的...
文本颜色:text-[color]-[shade] color:颜色名称 shade:色度,取值范围为 100~900,不可对黑色或白色使用 Color Black Color White Color Red 500 Color Blue 500 Color Gray 500 Color Green 500 Color Black Color White Color Red 500 Color Blue 500<...
文本颜色:text-[color]-[shade] color:颜色名称 shade:色度,取值范围为 100~900,不可对黑色或白色使用 Color Black Color White Color Red 500 Color Blue 500 Color Gray 500 Color Green 500 Color Black Color White Color Red 500 Color Blue 500<...
有人说它类名科学易记，但是，根本就不该有类名，就应该inline写法。没有样式复用这回事，该复用的是...