Tailwind CSS 基本配置

一、前言

最近的一個項目使用了新的框架，這個框架中使用了 Tailwind CSS。對這個 CSS 的框架不是很熟悉，所以在使用過程中會遇到一些問題。

對於這些問題記錄下。

本文章主要介紹 Tailwind CSS 的安裝、基本配置等。

二、安裝

1、安裝包

根據自己使用習慣是使用 npm 還是 yarn

# Using npm
npm install tailwindcss

# Using Yarn
yarn add tailwindcss

2、引入包

Tailwind css 分了幾個基本的模塊，可以按需引入自己需要的基礎模塊。

基本的導入，使用 Tailwind 指令

@tailwind base;

@tailwind components;

@tailwind utilities;

在一些項目中使用了 postcss-import 那么導入的方式是用 import

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

提示：在上面這些模塊中，base 模塊一般不會導入，因為有些基本的樣式我們是用不到的，例如 button 的 outline。

3、創建 tailwind.config.js 配置文件

這個是直接使用命令創建（在項目根目錄下）

npx tailwindcss init

執行完成后會生成一個配置文件，默認是空的。

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

4、用 tailwind 處理 css

項目中使用的 webpack，所以是在 webpack 中的 postcss-loader 中配置。

Vue CLI2.x 中這樣配置：

module.exports = {
  // ...
  module: {
    rules: [
      {
        // ...
        use: [
          // ...
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: [
                require('tailwindcss'),
                require('autoprefixer'),
              ],
            },
          },
        ],
      }
    ],
  }
}

Vue CLI3.x 中這樣配置：

module.exports = {
// css 配置
  css:{
    loaderOptions:{
      postcss:{
        plugins:[require('tailwindcss'),require('autoprefixer')]
      }
    }
  },
}

提示：對於其他環境下的配置可以參考官方文檔：Tailwind 安裝

三、關於配置

在 tailwind.config.js 配置文件中可以根據實際情況自己定義。

1.顏色配置問題

在實際項目中遇到的問題是這樣的：使用 text-pink-700 這樣的樣式不生效。

查看配置文件是這樣的：

theme: {
    colors: {
      'transparent': 'transparent',
      'black': '#22292f',
      'white': '#ffffff',
      'grey': '#9897a9',
      'grey-light': '#dae1e7',
      'red': '#EB5757'
    }
}

顏色自定義了幾種顏色，沒有 pink-700 對應的顏色，所以不生效。

正常來說一個項目中用到的顏色不會很多，使用什么顏色配置就好。

上面的配置中添加：'pink-700':'#b83280' 后就可以正常使用。

    colors: {
      'transparent': 'transparent',
      'black': '#22292f',
      'white': '#ffffff',
      'grey': '#9897a9',
      'grey-light': '#dae1e7',
      'red': '#EB5757',
      'pink-700':'#b83280'
    },