Tailwind 筆記

適用 windows

中文文檔

基本配置

1. 創建資料夾

mkdir 0925

2. 進入資料夾

cd 0925

3. 初始化項目

npm init -y

4. 安裝 Tailwind

npm install -D tailwindcss@latest

5. 產生設定檔 ( tailwind.config.js )

npx tailwindcss init --full     //完整版 ( 新手推薦 )
npx tailwindcss init            //空的

6. 新增一個 CSS 檔 ( styles.css ) 並注入核心程式碼

//styles.css

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

需安裝此模組，否則使用 @tailwind 會報錯

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

7. 編譯該 CSS 檔後產生 tailwind.css

npx tailwindcss build styles.css -o tailwind.css

8. 新增一個 HTML 檔 ( index.html ) 並引入編譯後的 CSS 檔

// index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="tailwind.css">
</head>
<body>
    ...
</body>
</html>

作為 Postcss plugin ( 選用 )

1. 安裝 postcss、autoprefixer ( 添加前綴，非必要 )

npm install tailwindcss@latest postcss@latest autoprefixer@latest

2. 新增一個 postcss.config.js 檔，添加 tailwind、autoprefixer

// postcss.config.js

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

智能提示

1. 安裝此模組

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

2. 效果圖 ( tailwind.config.js 檔必須存在，否則會失效 )

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

壓縮配置 ( 建議生產時再使用 )

1. 設置需要偵測的檔案

// tailwind.config.js

module.exports = {
  purge: {
    enabled: true,          // 開關壓縮功能，建議開發時設置false，只在生產時設置成true 
    content: ['./*.html'],  // 需要偵測的檔案
  },
  // ...
}

2. 編譯 styles.css 後產生壓縮完的 tailwind.css

npx tailwindcss build styles.css -o tailwind.css

設定 Breakpoints

1. 設定 Breakpoints 名稱與數值

// tailwind.config.js

module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }

      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}

2. 編譯

npx tailwindcss build styles.css -o tailwind.css

自定義 Base

1. 在 @layer base 中定義基本樣式

// styles.css

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

@layer base {
    h1 {
      @apply text-2xl;
    }
    h2 {
      @apply text-xl;
    }
  }

2. 編譯

npx tailwindcss build styles.css -o tailwind.css

自定義 Utility

1. 在 @layer utilities 中定義通用類別

// styles.css

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

@layer utilities {
  @variants responsive,hover {
    .scroll-snap-none {
      scroll-snap-type: none;
    }
    .scroll-snap-x {
      scroll-snap-type: x;
    }
    .scroll-snap-y {
      scroll-snap-type: y;
    }
  }
}

2. 編譯

npx tailwindcss build styles.css -o tailwind.css

自定義 Component

1. 在 @layer components 中定義組件

//styles.css

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

@layer components {
  @variants hover {
    .btn-blue {
      @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
    }
  }
}

2. 編譯

npx tailwindcss build styles.css -o tailwind.css

設定 Variants

1.設定 Utility 支援的 Variants

// tailwind.config.js

module.exports = {
  variants: {
    extend: {
      backgroundColor: ['active'],
      // ...
      borderColor: ['focus-visible', 'first'],
      // ...
      textColor: ['visited'],
    }
  },
}

2. 編譯

npx tailwindcss build styles.css -o tailwind.css

Tailwind 筆記

基本配置

1. 創建資料夾

2. 進入資料夾

3. 初始化項目

4. 安裝 Tailwind

5. 產生設定檔 ( tailwind.config.js )

6. 新增一個 CSS 檔 ( styles.css ) 並注入核心程式碼

7. 編譯該 CSS 檔後產生 tailwind.css

8. 新增一個 HTML 檔 ( index.html ) 並引入編譯後的 CSS 檔

作為 Postcss plugin ( 選用 )

1. 安裝 postcss、autoprefixer ( 添加前綴，非必要 )

2. 新增一個 postcss.config.js 檔，添加 tailwind、autoprefixer

智能提示

1. 安裝此模組

2. 效果圖 ( tailwind.config.js 檔必須存在，否則會失效 )

壓縮配置 ( 建議生產時再使用 )

1. 設置需要偵測的檔案

2. 編譯 styles.css 後產生壓縮完的 tailwind.css

設定 Breakpoints

1. 設定 Breakpoints 名稱與數值

2. 編譯

自定義 Base

1. 在 @layer base 中定義基本樣式

2. 編譯

自定義 Utility

1. 在 @layer utilities 中定義通用類別

2. 編譯

自定義 Component

1. 在 @layer components 中定義組件

2. 編譯

設定 Variants

1.設定 Utility 支援的 Variants

2. 編譯

Read more

【 Dcard X SITCON｜成為工程師然後呢？Dcard 工程師的日常大揭密！】 心得

快捷鍵 (適用Vscode)

vue 筆記

CSS 筆記

【 Dcard X SITCON｜成為工程師然後呢？Dcard 工程師的日常大揭密！】心得