Tailwind CSS - ［▌▣］

Tailwind CSS

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Utility-First的CSS框架

以功能性為主

把各種CSS會用到的屬性簡化為對應的class

p-8→padding: 2rem;

rounded-xl→border-radius: 0.75rem;

md:flex→@media (min-width: 768px) { display: flex; }

2024-03-14 Utility-first CSS(Tailwind CSS)が合理的であることの説明と、CSSによるUI開発小史 | blog.tai2.net

基於命名的CSS方法論，在實作時仍需同時考量HTML的構造，反而造成事倍功半

像是BEM或SUIT CSS

CSS in JS能避免class命名的衝突，但會導致過多過細的元件設計而難以管控

Utility-first CSS

2022-09-30 Tailwind考 - uhyo/blog

2023-07-24 Tailwind CSS実践入門第1章ユーティリティファーストとは何か

https://www.youtube.com/watch?v=TmWIrBPE6Bc

安裝

直接編譯

$ npx tailwindcss -i ./src/input.css -o ./public/output.css --watch

Vite

$ npm install tailwindcss @tailwindcss/vite

code:vite.config.ts(diff)

import { defineConfig } from 'vite'

+ import tailwindcss from '@tailwindcss/vite'

export default defineConfig({

plugins: [

+ tailwindcss(),

],

})

code:global.css

@import "tailwindcss";

2024-04-19 Tailwind CSSを本気でカスタマイズする方法 - Speaker Deck

Tailwind CSS v4

2024-11-30 Tailwind CSS v4 で導入される CSS First Configurations

過去在tailwind.config.js內的相關設定可直接寫在CSS檔內

使用@theme

component library

Headless UI - Unstyled, fully accessible UI components

Free Open Source Tailwind CSS Components | HyperUI

Flowbite - Tailwind CSS component library

Flowrift - Features

Sailboat UI - Modern UI component library for Tailwind CSS

Tailblocks — Ready-to-use Tailwind CSS blocks

部分付費

Tailwind UI - Official Tailwind CSS Components & Templates

FlyonUI - Free Tailwind CSS Components Library

Tailwind CSS Components - 600+ Free Examples and Templates

daisyUI — Tailwind CSS Components

https://github.com/tw-in-js/twind

整合CSS-in-JS和Tailwind

提供hash過後的class名稱，又能保持既有的Tailwind寫法

適合用在舊專案

或是會和Tailwind CSS的class名稱有衝突的library或框架

CSS to Tailwind Converter | Loopple

https://windicss.org/

為了改善Tailwind效能問題而啟步的框架

之後許多功能也回流至Tailwind上

目前已不再更新，但仍未棄用

官方推薦改為使用UnoCSS或其他類似框架

https://windstatic.com/

Tailwind CSS + Alpine.js