什么是TailwindCSS（二）

scss

有了tailwind，可以做到不需要写css文件，而且也不建议写。因为这样就失去了tailwind的意义。

但是，如果还是需要写css文件，可以使用下面的方式。

在css中使用@apply应用tailwind的样式。

.card {
    @apply rounded-full w-20 h-20 bg-gray-100;
}

custom

tailwind定义了一个统一的长度，宽度，高度，边距，边框，字体大小，颜色等等。

这些都可以称作主题theme。可以在config文件中配置。

module.exports = {
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    colors: {
      'blue': '#1fb6ff',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}

animation

tailwind定义了一些动画。但是对于自己特殊的需求，就不能相其他css样式一样简单了，需要在配置文件中自己定义。

需要在配置中定义 animation播放方式，

之后再在keyframes定义动画的关键帧；

这样，就可以在元素上使用animate-{name}的方式使用动画

例如，下面的配置定义了animate-wiggle的动画

theme: {
    extend: {
      animation: {
        wiggle: 'wiggle 1s ease-in-out infinite',
      },
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        }
      }
    },
  },

响应式

tailwind 支持方便的书写响应式代码，这是一大亮点。

只需要在原子类名前加上响应式的断点，就能在不同的屏幕尺寸下自动调整样式。

<div class="w-full md:w-auto">
  ...
</div>

上面的实例表示元素在大于768像素宽度时，宽度为auto；

tailwind的响应式断点都是 min-width 的；

这样，优先保证移动端样式之后，调整大屏幕样式就行。

hover

group-hover

当鼠标移动到一组元素到其中一个时，这组元素都需要变为hover状态。

就需要group来为元素标记为一组，在最外层都元素上标记group类。

之后使用group-hover:控制元素在hover之后的样式

工具

学会使用光标工具，会使得tailwindcss的开发更加高效。

下面介绍vscode的一些快捷键

多光标

option 鼠标点击出现多个光标

cmd + option 键盘上下，在一列上出现多个光标

cmd + shift + L 同样的字符后出现光标

shift + option 多列同时选中