Allenice

Appearance

安装初始化 tailwindcss ​

传统开发中，一套自定义设计中，需要自定义 CSS

使用 Tailwind，定义元素样式是通过直接在 HTML 上应用预设的类

以后写 CSS 不需要写样式，直接使用定义好的类

  • 避免为设计类名而浪费精力
  • 不需要写 CSS 文件
  • 修改元素类名比起修改 CSS 文件，更加安全，不会产生全局影响

  1. npx tailwindcss init可以生成配置文件

  2. 在配置文件里，将要解析的文件路径配置进去

js
module.exports = {
    content: ["./src/**/*.{js,jsx,ts,tsx}"],
    theme: {
        extend: {},
    },
    plugins: [],
};
module.exports = {
    content: ["./src/**/*.{js,jsx,ts,tsx}"],
    theme: {
        extend: {},
    },
    plugins: [],
};
  1. 在根 CSS 文件中引入@tailwind指令
CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind base;
@tailwind components;
@tailwind utilities;

vscode 插件：Tailwind CSS IntelliSense

前缀快捷参考

处理 hover，focus 和其他状态的修饰符 ​

每一个工具类都可以添加一个修饰前缀来描述你想要的效果，比如，要在bg-sky-700上应用 hover，可以使用hover:bg-sky-700

Tailwind 修饰符包含如下：

  • 伪类：:hover、:focus、:first-child、:required
  • 伪元素：::before、::after、::placeholder、::selection
  • 媒体和特性查询：如响应断点、暗主题、prefers-reduced-motion
  • 属性选择器：[dir="rtl"]、[open]

这些修饰符可以堆叠到目标元素上

在鼠标悬浮和在中间断点和暗主题的时候改变背景色

断点是响应式设计的构建块，使用他们来控制何时可以在特定的屏幕或设备大小调整布局

HTML
<button class="dark:md:hover:bg-fuchsia-600 ...">
  Save changes
</button>
<button class="dark:md:hover:bg-fuchsia-600 ...">
  Save changes
</button>

伪类 ​

Hover, focus, active ​

First, last, odd, even ​

表单状态 required, invalid, disabled ​

基于父元素(group-{modifier}) ​

当要定义一些样式是基于父元素时，可以使用group类标记父元素，使用group-*修饰符标记子元素，如group-hover: text-white来赋予目标元素样式：当父元素鼠标悬浮时，子元素文字颜色改变

嵌套组

html
<ul role="list">
    {#each people as person}
    <li class="group/item hover:bg-slate-100 ...">
        <img src="{person.imageUrl}" alt="" />
        <div>
            <a href="{person.url}">{person.name}</a>
            <p>{person.title}</p>
        </div>
        <a
            class="group/edit invisible hover:bg-slate-200 group-hover/item:visible ..."
            href="tel:{person.phone}"
        >
            <span class="group-hover/edit:text-gray-700 ...">Call</span>
            <svg
                class="group-hover/edit:translate-x-0.5 group-hover/edit:text-slate-500 ..."
            >
                <!-- ... -->
            </svg>
        </a>
    </li>
    {/each}
</ul>
<ul role="list">
    {#each people as person}
    <li class="group/item hover:bg-slate-100 ...">
        <img src="{person.imageUrl}" alt="" />
        <div>
            <a href="{person.url}">{person.name}</a>
            <p>{person.title}</p>
        </div>
        <a
            class="group/edit invisible hover:bg-slate-200 group-hover/item:visible ..."
            href="tel:{person.phone}"
        >
            <span class="group-hover/edit:text-gray-700 ...">Call</span>
            <svg
                class="group-hover/edit:translate-x-0.5 group-hover/edit:text-slate-500 ..."
            >
                <!-- ... -->
            </svg>
        </a>
    </li>
    {/each}
</ul>

任意组

基于兄弟节点(peer-{modifier}) ​

html
<form>
    <label class="block">
        <span class="block text-sm font-medium text-slate-700">Email</span>
        <input type="email" class="peer ..." />
        <p class="mt-2 invisible peer-invalid:visible text-pink-600 text-sm">
            Please provide a valid email address.
        </p>
    </label>
</form>
<form>
    <label class="block">
        <span class="block text-sm font-medium text-slate-700">Email</span>
        <input type="email" class="peer ..." />
        <p class="mt-2 invisible peer-invalid:visible text-pink-600 text-sm">
            Please provide a valid email address.
        </p>
    </label>
</form>

伪元素 ​

前缀含义
beforebefore 伪元素
afterafter 伪元素
placeholderinput 框占位符
fileinput 上传文件
marker列表的序号或者黑点
selection鼠标选择的文字会有高亮背景等
first-line文本的第一行
first-letter文本的第一个文字
backdrop对话框背景

响应式断点 ​

前缀含义
sm最小宽度 640px
md最小宽度 768px
lg最小宽度 1024px
xl最小宽度 1280px
2xl最小宽度 1536px

媒体查询 ​

颜色方案媒体查询 ​

不加修饰符使用的是 light 模式，dark修饰符是暗色主题。

减少动画 ​

使用motion-reduce、motion-safe修饰符设置样式，一般用在要添加过渡动画或者加载动画等地方。

对照 ​

不知道是干啥的

视口方向 ​

使用portrait、landscape修饰符为特定视口方向的元素添加样式。

打印样式 ​

使用print修饰符为打印时添加样式，可以设置print:hidden类，表示打印时隐藏元素

支持规则 ​

使用supports-[...]修饰符来给浏览器支持的规则指定样式

属性选择器 ​

aria 属性 ​

这个做是无障碍特性的，暂时用不上

data 属性 ​

自定义属性，可以添加data-*修饰符

html
<!-- Will apply -->
<div data-size="large" class="data-[size=large]:p-8">
    <!-- ... -->
</div>

<!-- Will not apply -->
<div data-size="medium" class="data-[size=large]:p-8">
    <!-- ... -->
</div>
<!-- Will apply -->
<div data-size="large" class="data-[size=large]:p-8">
    <!-- ... -->
</div>

<!-- Will not apply -->
<div data-size="medium" class="data-[size=large]:p-8">
    <!-- ... -->
</div>

可以在tailwind.config.js配置文件中配置通用的 data 属性的快捷方式

js
module.exports = {
    theme: {
        data: {
            checked: 'ui~="checked"',
        },
    },
};
module.exports = {
    theme: {
        data: {
            checked: 'ui~="checked"',
        },
    },
};

可以在自定义data-*修饰符：

html
<div data-ui="checked active" class="data-checked:underline">
    <!-- ... -->
</div>
<div data-ui="checked active" class="data-checked:underline">
    <!-- ... -->
</div>

RTL 支持 ​

ltr 修饰符只在 dir 属性为 ltr 时生效。