tailwind css 使用技巧：配置、插件及搭配 Sass

导语：

tailwind css 因其简洁、高效而风靡，但它的使用过程中也有一些技巧可以帮助我们提高效率。这篇文章将主要介绍tailwind css 使用过程中的一些技巧，包括插件和配置的使用，以及如何与 Sass 等预编译技术搭配使用。

技巧一：安装必备插件

tailwind css 自身并不提供很多功能，但我们可以通过安装插件来扩展它的功能。其中，一些必备插件包括：

• postcss-import：允许我们导入其他 CSS 文件。
• postcss-preset-env：为我们提供了对 CSS 最新特性的支持。
• tailwindcss-typography：为我们提供了更丰富的排版样式。
• tailwindcss-jit：允许我们在运行时生成 CSS。

技巧二：配置 tailwind.config.js

tailwind.config.js 文件是 tailwind css 的配置文件，我们可以通过它来配置各种选项，比如主题颜色、字体、间距等。

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#f59e0b',
        secondary: '#10b981',
      },
      fontFamily: {
        sans: ['Inter', 'Helvetica', 'Arial', 'sans-serif'],
        serif: ['Merriweather', 'Georgia', 'serif'],
      },
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
    },
  },
  plugins: [
    require('postcss-import'),
    require('postcss-preset-env'),
    require('tailwindcss-typography'),
    require('tailwindcss-jit'),
  ],
}

技巧三：与 Sass 搭配使用

tailwind css 可以与 Sass 等预编译技术搭配使用，这可以让我们使用 Sass 的变量、混合函数等特性。

// _variables.scss
$primary: #f59e0b;
$secondary: #10b981;

// _main.scss
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

.btn {
  @apply bg-$primary text-white rounded-lg px-4 py-2;
}

技巧四：使用 JIT 模式

JIT 模式可以让我们在运行时生成 CSS，这可以大大减少 CSS 文件的大小。

module.exports = {
  // ...
  plugins: [
    // ...
    require('tailwindcss-jit'),
  ],
}

技巧五：使用组件和实用程序

tailwind css 提供了很多组件和实用程序，我们可以直接使用它们来构建我们的页面。

<div class="flex items-center justify-center">
  <button class="btn">
    Click me
  </button>
</div>

结语：

tailwind css 是一个非常强大的 CSS 框架，我们可以通过使用插件、配置、Sass 和 JIT 模式等技巧来提高我们的开发效率。