初識

只需書寫 HTML 代碼，無需書寫 CSS，即可快速構(gòu)建美觀的網(wǎng)站

Tailwind CSS 是一個功能類優(yōu)先的 CSS 框架，它通過提供大量的原子類（utility classes）來幫助開發(fā)者快速構(gòu)建界面。使用 Tailwind CSS 可以極大地提高開發(fā)效率，因為它減少了編寫傳統(tǒng) CSS 時的重復(fù)性和模版代碼。

安裝

• Tailwind CSS 安裝

Tailwindcss試用安裝

1. 安裝 Tailwind CSS

   npm install -D tailwindcss
   npx tailwindcss init

2. 配置模板文件的路徑

   • tailwind.config.js

      /** @type {import('tailwindcss').Config} */module.exports = {// 配置模板文件的路徑content: ["./src/**/*.{html,js}"],theme: {extend: {},},plugins: [],};______________________________________________________/** @type {import('tailwindcss').Config} */export default {content: ['./src/**/*.{html,js}'],theme: {extend: {}},plugins: []}
     

3. 下載Vscode的tailwindcss提示插件
   Tailwind CSS IntelliSense
   

4. 類名快速補全
   在 Visual Studio Code 中，設(shè)置 “tailwindCSS.emmetCompletions”: true 將啟用 Tailwind CSS 的 Emmet 插件集成。
   Emmet 是一個用于快速編寫 HTML 和 CSS 的工具，它通過縮寫語法來擴展成完整的代碼。
   

   1. 你可以通過點擊左下角的齒輪圖標選擇“設(shè)置”，在設(shè)置搜索框中輸入tailwindCSS.emmetCompletions找到 Editor: Emmet Completions 的設(shè)置，并確保它旁邊的復(fù)選框被勾選。
   2. 如果你想要通過 JSON 文件編輯設(shè)置，可以打開 settings.json 文件（可以通過點擊設(shè)置界面右上角的圖標）
      并添加以下配置：

      {"tailwindCSS.emmetCompletions": true,
      }
      

• 效果
  

快速書寫技巧

以下是一些使用 Tailwind CSS 快速書寫的技巧：

1. 熟悉類名： Tailwind CSS 的類名是直觀的，例如 .text-center 使文本居中，.bg-blue-500 設(shè)置背景色為藍色。熟悉這些類名能幫助你快速構(gòu)建界面。
2. 使用 @apply 指令： 如果你在使用預(yù)處理器（如 SASS 或 LESS）或者喜歡在 CSS 文件中定義樣式，可以使用 @apply 指令將 Tailwind 的類名應(yīng)用到你的樣式規(guī)則中。

   .btn {@apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
   }
   

3. 利用響應(yīng)式設(shè)計： Tailwind CSS 提供了響應(yīng)式前綴，如 md: 表示在中等屏幕大小及以上時應(yīng)用該樣式。

   <div class="md:bg-blue-500"><!-- 內(nèi)容 -->
   </div>
   

4. 使用配置文件定制： Tailwind CSS 允許你通過 tailwind.config.js 文件進行大量定制，包括顏色、字體、間距等。合理配置可以減少不必要的類名，使項目更加整潔。
5. 使用 VS Code 插件： 安裝 Tailwind CSS 的 VS Code 插件可以提供智能提示和自動補全，進一步加快開發(fā)速度。
6. 構(gòu)建自己的設(shè)計系統(tǒng)： 如果你的項目有特定的設(shè)計要求，可以基于 Tailwind CSS 構(gòu)建自己的設(shè)計系統(tǒng)，定義一套符合項目風(fēng)格的類名。
7. 利用函數(shù)和簡寫： Tailwind CSS 提供了一些簡寫方式，比如 p-4 可以同時設(shè)置上下左右的外邊距。
8. 學(xué)習(xí)官方文檔和社區(qū)資源： Tailwind CSS 的官方文檔非常完善，社區(qū)也有很多資源和教程可以幫助你快速上手和提高。

通過這些方法，你可以更高效地使用 Tailwind CSS，快速構(gòu)建出既美觀又響應(yīng)式的網(wǎng)頁。

擴展

• 通過 @layer、@apply 或者插件的方式擴展原子 class
  • html

    <!-- Will look like a card, but with square corners -->
    <div class="card rounded-none"><!-- ... -->
    </div>
    

  • main.css

    @tailwind base;
    @tailwind components;
    @tailwind utilities;@layer components {.card {background-color: theme('colors.white');border-radius: theme('borderRadius.lg');padding: theme('spacing.6');box-shadow: theme('boxShadow.xl');}/* ... */
    }
    

• 支持 prefix 來避免 class 名字沖突
  • tailwind.config.js

    /** @type {import('tailwindcss').Config} */
    module.exports = {// ...prefix: 'tw-',
    }
    

好處

Todo

• 待續(xù)，睡了~