tailwind入门Tailwind是一个CSS框架，它提供了一组预定义的CSS类，可以帮助开发者快速构建现代化的Web

自己其实是一直不喜欢原子化css这种东西的，虽然上手的第一个项目用的是vuetify，里面充满了各种各样的原子化css，但是感觉原子化css实在是真的丑，让本来就臃肿不堪的html变得更加丑陋可惜莫得办法，新项目用的是这个，那就照着用吧

起步

可以默认的脚手架直接搭建项目大致会干以下两件事

创建一个postcss.config.js，然后往里面添加tailwindcss插件，当然我们也可以在里面放别的插件
创建tailwind.config.js，来配置tailwind

我们可以在这里配置tailwind的各种class对应的值

/** @type {import('tailwindcss').Config} */
module.exports = {
  //  指定需要扫描的文件路径，用于自动生成 CSS 类。
  content: ['./**/*.tsx'],
  plugins: [],
  // 设置主题配置，用于覆盖默认主题/设置新的主题
  theme: {
    // 数组后面的项为备选项
    fontFamily: {
      NoteSans: ['NoteSans'],
      Inter: ['Inter'],
      sans: ['NotoSans', 'CJK', 'SC'],
      Variable: ['Variable'],
    },
    // 第一个值是字体大小，第二个是行高/传个对象进去就是设置行高和字体粗细
    fontSize: {
      xs: ['0.75rem', '1rem'],
      s: ['0.875rem', '1.125rem'],
      m: ['1rem', '1.25rem'],
      l: ['1.25rem', '1.375rem'],
      xl: ['1.5rem', '1.625rem'],
      '2xl': ['2rem', '2.125rem'],
      'label-xs': ['0.75rem', { lineHeight: '0.875rem', fontWeight: 400 }],
      'label-s': ['0.875rem', { lineHeight: '1rem', fontWeight: 400 }],
      'label-m': ['1.125rem', { lineHeight: '1.125rem', fontWeight: 500 }],
      link: ['1rem', { lineHeight: '1.375rem', fontWeight: 400 }],
      markup: ['1rem', { lineHeight: '1.375rem', fontWeight: 500 }],
      paragraph: ['1rem', { lineHeight: '1.25rem', fontWeight: 400 }],
    },
    // 设置全局关键帧的地方，同@keyframes floatIn
    // tailwind自带spin、ping、pulse(透明度.5到1)关键帧、bounce(往下弹一下)
    keyframes: {
      floatIn: {
        from: {
          transform: 'translateY(16px)',
          opacity: '0',
        },
        to: {
          transform: 'translateY(0px)',
          opacity: '1',
        },
      },
      fadeIn: {
        from: {
          opacity: '0',
        },
        to: {
          opacity: '1',
        },
      },
      messageFloatIn: {
        from: {
          transform: 'translateY(16px) translateX(-50%)',
          opacity: '0',
        },
        to: {
          transform: 'translateY(0px) translateX(-50%)',
          opacity: '1',
        },
      },
      spin: {
        from: {
          transform: 'rotate(0deg)',
        },
        to: {
          transform: 'rotate(360deg)',
        },
      },
    },
    // 设置全局animation，tailwind自带同上
    animation: {
      'float-in': 'floatIn 0.3s ease-out forwards',
      'message-float-in': 'messageFloatIn 0.3s ease-out forwards',
      spin: 'spin 1s linear infinite',
      'fade-in': 'fadeIn 0.3s forwards',
      'fade-in-after-transition': 'fadeIn 0.3s forwards 0.15s',
    },
    // 覆盖/设置主题颜色
    colors: {
      primary: {
        light: '#efa333',
        DEFAULT: '#EB8D00',
        dark: '#a46200',
      },
      'primary-bg': '#E0EAFF',
      accent: '#BC31EA',
      'accent-bg': '#F7DEFF',
      text: '#111111',
      border: '#111111',
      subtle: '#767676',
      'border-subtle': '#AAAAAA',
      background: '#EEEEEE',
      'gradient-from': 'rgba(255,0,0,0.5)',
      surface: '#FFFFFF',
      'color-link': '#074EE8',
      transparent: 'transparent',
      error: '#DF2A2A',
    },
  },
};

配置完了之后，启用tailwind的话，先在index.css文件里

@tailwind base;
@tailwind components;
@tailwind utilities;

然后在index.js里面引入即可

插件

Tailwind CSS IntelliSense，vsc插件商店里有，装了会提供prompt

语法

伪类/伪元素

tailwind里面的状态非常非常多，可以帮助我们快速的写元素不同状态下的样式

伪类

hover、focus、active、first、last、even、odd、disabled等等伪类都可以写，直接[伪类]:[样式]就好了

比如一个有悬浮、选中、激活样式的按钮

<button class="bg-violet-500 hover:bg-violet-600 active:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-300">
  Save changes
</button>

除此以外，tailwind还提供了group-和peer-，一个是用来根据父元素的伪类状态来变更样式，一个是根据同级元素的伪类状态来变更样式 group是先给父元素加上group属性，然后子元素通过group-[伪类状态]来变更对应的样式比如

<a href="#" class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500">
  <p class="text-slate-500 group-hover:text-white text-sm">Create a new project from a variety of starting templates.</p>
</a>

当父元素a容器被悬浮的时候，它的背景颜色会发生变化，而里面的p元素也会响应的变更字体颜色如果一部分元素里面有多个group需要对应，可以使用group/[name]来不同的group命名从而一一对应上

peer的话，同样也是先给对应的元素加上peer属性，然后再peer[伪类]:

<label>
  <span class="peer-invalid:text-red-500 ...">Email</span>
  <input type="email" class="peer ..."/>
</label>

再举个上面没举的加上name的例子

<fieldset>
  <legend>Published status</legend>

  <input id="draft" class="peer/draft" type="radio" name="status" checked />
  <label for="draft" class="peer-checked/draft:text-sky-500">Draft</label>

  <input id="published" class="peer/published" type="radio" name="status" />
  <label for="published" class="peer-checked/published:text-sky-500">Published</label>

  <div class="hidden peer-checked/draft:block">Drafts are only visible to administrators.</div>
  <div class="hidden peer-checked/published:block">Your post will be publicly visible on your site.</div>
</fieldset>

伪元素

主要是before和after，写法一样的，也是before: 写了之后会自动加上before:content-['']，也就是给before伪元素加上content: ''的样式

<span class="before:block before:absolute before:-inset-1 before:-skew-y-3 before:bg-pink-500 relative inline-block">
  <span class="relative text-white">annoyed</span>
</span>

除此以外，还有placeholder、file(传文件的button)、marker(ul用于设置前面的小点)、selection(设置被选中的文本的样式)、first-line、first-letter这些伪元素，写法都是一样的

响应式

有不设置、sm、md、lg、xl、2xl六种按照最小宽度划分，分别为0、640px、768px、1024px、1280px、1536px 这些尺寸可以当伪类来写,比如

<!-- 默认16rem，屏幕超过760px的时候就是32rem，超过1024px则为48rem -->
<img class="w-16 md:w-32 lg:w-48" src="...">

apply

用来新建一个类来包含多个tailwind属性值

<div class="p-2 text-gray-900 font-semibold">首页</div>
<div class="p-2 text-gray-900 font-semibold">学习TailwindCSS</div>
<div class="p-2 text-gray-900 font-semibold">TailwindCSS的设计哲学</div>
<div class="p-2 text-gray-900 font-semibold">最佳实践</div>

转换为

<div class="menu">首页</div>
<div class="menu">学习TailwindCSS</div>
<div class="menu">TailwindCSS的设计哲学</div>
<div class="menu">最佳实践</div>

<!-- css -->
.menu {
  @apply p-2 text-gray-900 font-semibold;
}

当然其实不推荐这么写，主题上还是推荐只写原子化css而不写额外的css内容