0x01 概述 (1)简介 Tailwind CSS 官网:https://www.tailwindcss.cn/ Tailwind CSS 是一个 CSS 框架,使用初级“工具”类创建布局 如 Bootstrap 等传统 CSS 框架,其使用的类通常与组件直接相关;然而,Tailwind 则采用了
@responsive { .bg-brand-gradient { background-image: linear-gradient(#3490dc, #6574cd) !important; } } 选择器策略 在合并第三方 JS 库且这些库会为您的元素添加内联样式的时候,设置 important 为true 会引入一些问题。在这种情况下,Tailwind 的 !important 功能会覆盖内联样式,这会破坏您的预期设计。
Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.
backgroundSize The background-size utilities like blur The blur utilities like borderCollapse The border-collapse utilities like border-collapse borderColor The border-color utilities like borderOpacity The border-color opacity utilities like border-opacity-25 borderRadius The border-radius utilities ...
Tailwind CSS version v2.1+ 将模糊滤镜应用于元素的实用程序。 Default class reference Class Properties blur-0--tw-blur: blur(0); blur-sm--tw-blur: blur(4px); blur--tw-blur: blur(8px); blur-md--tw-blur: blur(12px); blur-lg--tw-blur: blur(16px); ...
tailwindcss 3.3.3(完成入门,需要补充每个单独样式) 归纳 修饰符堆叠 以下为修饰符 伪类伪元素 使用方法: 在实用程序类前添加hover:bg-sky-700 伪类 hover focus focus-within 用来选择和样式化一个元素或者它的任何后代元素获得焦点的情况 focus-visible 用来选择和样式化一个元素或者它的任何...
Use theblur-[<value>]syntaxto set theblurbased on a completely custom value: For CSS variables, you can also use theblur-(<custom-property>)syntax: This is just a shorthand forblur-[var(<custom-property>)]that adds thevar()function for you automatically. Responsive design...
Tailwind CSS 备忘清单 Tailwind CSS 是一个功能类优先的 CSS 框架,它集成了诸如 flex, pt-4, text-center 和 rotate...
Background Size Gradient Color Stops Background Image Spacing Padding Margin Space Between SVG Fill Stroke Stroke Width Typography Font Family Font Size Font Smoothing Font Style Font Weight Font Variant Numeric Letter Spacing Line Height List Style Type List Style Position Text Align Text Decoration ...
backgroundColor: ['hover', 'focus', 'active'], }, }, // 配置插件 plugins: [ // 只引入需要的插件 require('@tailwindcss/forms'), require('@tailwindcss/typography'), ], } PostCSS优化 配置PostCSS 以提升构建性能: // postcss.config.js ...