TailwindCSS

反对声音：https://nuejs.org/blog/tailwind-misinformation-engine/

TailwindCSS本身就是一个 PostCSS 插件, 旨在消除样式代码。优点：

• 不要命名
• CSS 不会增长
• 修改不担心破坏其他地方

配置中 theme 字段包含：screens colors spacing，剩下是 corePlugin 的，fontFamily 等等，直接提供是修改默认主题，extend 用来扩展默认主题，如添加响应式断点 screens @layer 创建 base, components, utilities, variants, Tailwind 插入 @tailwind 位置

theme() 访问 theme 中配置值

• modifiers 可以是伪类、伪元素、响应式断点、dark 等各种媒体查询、supports-[display:grid]、 aria-*
• responsive modifiers：默认移动优先，small、medium、large、xl、2xl，md:max-xl 表示范围，min-[203px] max-[320px] 自定义

utility 命名：

• aspect- container- columns- box- block float- clear- isolate object- overflow- overscroll- relative left- invisible z-
• basis- flex-row flex-nowrap
• pt- px- ps- pe- m-（同 space-）
• w- w-1/2 w-full w-svw h- size-
• font-mono text-sm italic font-bold tabular-nums tracking-wide line-clamp-3 leading-tight text-left text-blue-600/50 underline uppercase truncate text-wrap text-balance indent- align-top whitespace-nowrap break-all
• bg- bg-cover bg-gradient-to-r from-cyan-500 to-blue-500 rounded-sm rounded-tr-* border- divide-y outline- ring-
• shadow- opacity- mix-blend- bg-blend-
• blur- filter-none backdrop-blur
• border-collapse
• transition ease-in-out delay-150
• scale- translate-x origin-
• accent- appearance-auto cursor- caret- pointer-events-none resize scroll-smooth scroll-pt- snap-center touch- select-none
• fill- stroke-
• sr-only(only screen readers, 屏幕外) forced-color-adjust-none
• (group-{modifier})
• !flex(important) // 也可配置全局 important

@tailwindcss/typography 添加基本样式

prettier-plugin-tailwindcss 类名自动排序

@tailwindcss/container-queries 容器查询

@tailwindcss/forms 表单样式

radix // 无样式组件库，shadcn/ui 是 radix+tailwind

daisyui 纯样式组件库

daisyui 自定义:

• @apply 扩展 utility
• Add your own theme.
• Opt out of daisyUI's design decisions, and only use an unstyled (skeleton) version of daisyUI.