tailwindcss 從0到1

簡介

Tailwind CSS 是一個功能類優先的 CSS 框架，它集成了諸如 flex, pt-4, text-center 和 rotate-90 這樣的的類，它們能直接在腳本標記語言中組合起來，構建出任何設計

簡單的理解 tailwind css 是原 atom css 的升級版，提供更靈活的配置, 更系統的預設樣式類, 更完整的配置體系

簡單例子

[圖片上傳失敗...(image-475de9-1636387074601)]

<div class='card w-56 h-72 px-4 rounded-md bg-white'>
    <div class='h-56 flex justify-center align-center'>
      <img class='h-full' 
      src='https://hbimg.huabanimg.com/dedfb3c6331d28a7702cf071e46650d6a7d68a75721e2-K7Ndig'
      />
    </div>
    <div class='bg-white'>
      <h2 class='text-sm text-gray-400'> Houseplant </h2>
      <div class='flex justify-between align-center'>
        <h1 class='text-lg text-black'> Anthurium </h1>
        <button class='text-center text-sm text-white py-1 px-4 bg-green-500 rounded-full'> $28.00 </button>
      </div>
    </div>
  </div>

安裝

  1. 安裝依賴
// vue vite
npm install tailwindcss@latest postcss@latest autoprefixer@latest
  1. 生成配置文件
npx tailwindcss init
  1. 引入樣式文件
// 模式1: 通過css文件按需引入
// index.css


@tailwind base; // 基礎預設樣式
@tailwind components; // 組件樣式
@tailwind utilities; // 工具樣式
// main.js
import './index.css'

// 模式2: CND
// index.html
<link  rel="stylesheet">

// 模式3: 全引入
import "tailwindcss/tailwind.css"

功能

個人總結 tailwind css 功能主要包括三部分：

  1. 預設樣式類 prefilght
  2. 自定義擴展函數與指令 @tailwind
  3. 自定義主題，功能擴展 tailwind.config.js

預設樣式類

tailwind css 提供了一套以移動優先的，響應式樣式類, 類似原bootstrap 可直接使用

直接使用樣式類

<button class='
m-10
w-24
h-12
border
rounded-full
bg-green-500
text-center
text-gl 
text-white 
font-medium'>
 按鈕
</button>

[圖片上傳失敗...(image-87b874-1636387074601)]

類型或狀態修飾

tailwind css 為處理響應式，偽類， 偽元素提供類型作用范圍限定類

// 添加響應式樣式
// 默認字體大小為 text-base， 當視圖寬度為 sm '@media (min-width: 640px)' 字體尺寸為 text-sm
<div class='text-base sm:text-sm'> 內容 </div>


// 添加懸停樣式
<div class='hover:bg-green-500 hover:text-white'> 內容 </div>


// 偽元素 
<ul>
  <li class='first:text-gray-300> item </li>
  ...
<ul>


// 黑暗模式
<div class='dark:text-white'> 內容 </div>

樣式擴展

樣式擴展，使我們能組合現有基礎類或定義自己的樣式類.

// 基礎樣式
// 類似 reset.css 為原始標簽提供初始樣式
@layout base{
  h1 {
    @apply text-2xl; // 指令 @apply 類似scss @include 收集已定義的樣式類
  }
}
<h1> ... </h1>


// 抽取組件類
@layout components{
  .loc-button {
    @apply py-1 px-4 bg-black text-sm hover:bg-green-500 hover: text-whirte
  }
}


<div class='.loc-button'> ... </div>


// 功能類
@layout utilities {
  .center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
<div class='center> ... </div>

組件類與功能類的主要區別在于職能應用場景的不同， 組件注重樣式的集合和封裝, 功能注重某一點只能的樣式復用

函數與指令

@tailwind 用于引入樣式類

  • base 基礎樣式類
  • components 組件樣式類
  • utilities 工具樣式
  • screens 媒體查詢斷點樣式
@tailwind base;
@tailwind components;
@taiwind utillities;
@taiwind screens;

@apply 內聯功能樣式

.btn{
  @apply bg-blue-500 text-white;
}

@layer 劃歸類的分組

@layer utilities{
  .title{
    color: red;
  }
}


@layer components{
  .title{
    color: orange;
  }
}


@layer base {
  .title {
    color: blue;
  }
}
// 這里title 顏色為紅色, 不同的分組將影響類的優先級順序

@variants 指定各狀態類變體

@variants hover {
  .btn {
      background: orange;
      color: white;
  }
}
// 生成樣式
.btn{
   background: orange;
   color: white;
}


.hover:btn:hover{
   background: orange;
   color: white;
}
<div class='hover:btn'> ... </div>


// : 是轉義的意思, 等價 scss: .hover:btn{ &:hover{ ... } }

@responsive 生成默認響應式類變體

@responsive{
  .bg-color{
     background: orange;
  }
}
// 生成樣式類
@media (min-width: 640px) {
  .sm:bg-color { // 等價類名 .sm:bg-color
    background: orange;
  }
}
@media (min-width: 640px) {
  .md:bg-color { // 等價類名 .md:bg-color
    background: orange;
  }
}
...

該指令會根據默認響應設置，為每個斷點生成樣式類

@screen 生成指定響應斷點的變體

@screen sm{
  .bg-color{
    background: orange;
  }
}


// 生成代碼
@media (min-width: 640px) {
  .sm:bg-color {
    background: orange;
  }
}

該指定只為指定的斷點，生成樣式類

@theme() 獲取主題樣式

.content-area {
  height: calc(100vh - theme('spacing.12'));
}

定制化

通過taildwind.config.js 配置文件，能實現更多自定義功能

配置主要分為：

  • theme 主題 定制字體，顏色等視覺定義
  • variants 狀體修飾定義
  • plugins 引入外部定義js 樣式插件
  • presets 自定義基礎類, 替代 tailwind 的默認基礎類 base
  • prefix 類前綴, 可添加自定義類前綴，方式與其他樣式庫沖突
  • corePlugins 按需設置需要的生成類, 優化包體積

主題


  theme: {
    // 設置響應斷點
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    // 調色盤
    colors: {
      gray: colors.coolGray,
      blue: colors.lightBlue,
      red: colors.rose,
      pink: colors.fuchsia,
    },
    // 間距
    spacing: {
      '1': '8px',
      '2': '12px',
      '3': '16px',
      '4': '24px',
      '5': '32px',
      '6': '48px',
    }
  },

插件

const plugin = require('tailwindcss/plugin')  
plugins: [
    
    // 定義功能類
    plugin(({ addUtilities }) => {


      const utilities = {
        '.center': {
          'display': 'flex',
          'justify-content': 'center',
          'align-items': 'center' 
        }
      }
      addUtilities(utilities, ['responsive', 'hover'])
    }),


    // 定義組件類
    plugin(({ addComponents }) => {
      const component = {
        '.btn': {
          'padding': '8px 16px',
          'border': '1px solid #eee'
        }       
      }
      addComponents(component)
    }),


    // 定義基礎類
    plugin(({ addBase }) => {
      addBase({
        'h1': { fontSize: '32px' },
        'h2': { fontSize: '24px' },
        'h3': { fontSize: '18px' },
      })
    },


    // 轉義
    // 如果類名中存在特殊字符時，通過 e 函數做統一轉義, 例如: .hover:btn -> .hover:btn
    plugin(({ addUtilities, e }) => { addUtilities({ [`.${e('hover:btn')}`]: {...} }) }),
    
    // 前綴
    // 為類名添加自定義前綴
    // prefix: 'loc'
    plugin(({ addComponents, prefix }) => {
       addComponents({
          [prefix('.cmp')]: {...} // .loc-cmp
       })
    })
  ...
  ]

預設

module.exports = {
  presets: [
    // 導入外部自定義配置
    require('./self-tailwind-config.js')
  ],
  // ...
}

預設類名的使用

tailwind css 提供的預設類很多，一般根據官方文檔，按照功能查詢所需的類名。

總結幾條規則：

  1. 以具體的css屬性名或簡寫開頭: flex, justify-center, p-0, m-0

  2. 尺寸：

    1. 帶別名： 一般與響應式有關， text-xs, text
    2. 0.5的倍數: w-0 w-0.5 h-0 h-0.5
    3. 5倍數: placeholder-opacity-0, placeholder-opacity-5 , opacity-0, opacity-5
    4. 遞增: delay-75, delay-100, delay-200

  3. 位置: border-t-0, border-r-0

總結

個人覺得 tailwind css 的主要優勢在于提供了一套自定義樣式模板的工具，并有一個完整的可擴展的基礎示例預設樣式 。

非常適合有UI設計體系或要求統一UI視覺的產品, 通過組合基礎樣式模板，統一樣式規范，提高編寫效率。

如果UI本身就沒有統一規范的化，還是內聯樣式文件來的靈活些。

這一套有點像組件庫為了可配置主題而抽離出來的組件樣式變量。

參考

官方文檔

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Alpine.js提供大型框架諸如Vue、React等的反應性和聲明性的組件化開發框架，可保留自己的DOM并按照自...
    JunChow520閱讀 6,249評論 0贊 1
  • 復習jQuery基本使用和選擇器重點內容：jQuery介紹：jQuery是別人封裝好的一個js庫，免費開源易用，提...
    Yuann閱讀 330評論 0贊 0
  • 導語 就在前段時間laravel更新了8.0版本，其中有一個新特性是Jetstream是Laravel的新應用程序...
    wjcms閱讀 1,808評論 0贊 2
  • 前言 webpack2和vue2已經不是新鮮東西了，滿大街的文章在講解webpack和vue，但是很多內容寫的不是...
    技術宅小青年閱讀 6,581評論 4贊 43
  • HTML 5 HTML5概述 因特網上的信息是以網頁的形式展示給用戶的，因此網頁是網絡信息傳遞的載體。網頁文件是用...
    阿啊阿吖丁閱讀 4,068評論 0贊 0