bg-black--tw-bg-opacity: 1; background-color: rgba(0, 0, 0, var(--tw-bg-opacity)); bg-white--tw-bg-opacity: 1; background-color: rgba(255, 255, 255, var(--tw-bg-opacity)); bg-gray-50--tw-bg-opacity: 1; background-color: rgba(249, 250, 251, var(--tw-bg-opacity)...
bg-currentbackground-color: currentColor; bg-black--tw-bg-opacity: 1; background-color: rgba(0, 0, 0, var(--tw-bg-opacity)); bg-white--tw-bg-opacity: 1; background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
如果大家想在项目中使用Tailwind CSS,可以考虑下,自己团队和项目中,是否满足下面的条件;如果不满足下面的要求,Tailwind可能会让我们的工作变得举步维艰。 1. 统一的设计规则 首先,在项目中应该有一个设计规则。这就要求UI小姐姐和你需要通力合作。也就是UI设计和前端应该使用一致的设计规范。 假设我们有一个标准按钮...
theme: { extend: { backgroundColor: { heise: { 0: 'rgba(0, 0, 0, 0)'...
确定Tailwind CSS版本是否支持RGBA颜色设置: Tailwind CSS本身不直接支持在配置文件中使用RGBA颜色格式作为默认颜色,但你可以通过自定义属性(custom properties,也称为CSS变量)来实现这一点。Tailwind CSS 2.x及以上版本支持CSS变量的使用。 查找Tailwind CSS文档中关于边框颜色设置的说明: Tailwind CSS文档说明,你可以通过...
下面呢,我们就以我相对熟悉的技术(Vite+React)来演示如何在项目中使用Tailwind CSS。 1. 创建项目 我们是用Vite来创建一个React+TS项目。 yarn create vite tailwindReact --template react-ts cd tailwindReact 1. 2. 2. 安装 Tailwind 相关依赖 yarn add -D tailwindcss postcss autoprefixer ...
生成css: .bg-white, .hover\:bg-white:hover { --tw-bg-opacity: 1 !important; background-color: rgba(255, 255, 255, var(--tw-bg-opacity)) !important } .mobile\:bg-white, .mobile\:hover\:bg-white:hover { --tw-bg-opacity: 1 !important; background-color: rgba(255, 255, 255,...
.button{background-color:rgba(247,186,30,0.6);}.tab{background-color:rgba(247,186,30,0.6);} 后期我们想要更改项目的颜色方案,我们需要找到此颜色的每个实例并在「所有地方」进行更新。对所有实例进行手动替换,这是一步耗时且充满危险的举动,你可能会误伤其他的变量,又或者遗漏部分变量。
background-color: rgba(61, 61, 63, 0.9); height: 12.8vw; z-index: 1000; } After 写起来实在是太爽了! 其实就这一个原因就够了 2. Tailwindcss是为移动而生,非常简单就可以将适配写好,超级简单 一行代码搞定手机、平板、电脑的支持。 <!-- ....
atomic css 即原子 css,它提倡并提供一套原子类,类名为其对应 css 的缩写 例如: class="mt-20" => .mt-20 { margin-top: 20px; } class="flex" => .flex { display:flex; } class="hover:bg-red" => .hover:bg-red:hover { background:red; } ...