# Tailwind CSS, Tailwind UI ###### tags: `Tailwind/Bootstrap` `UI library` ## [Tailwind CSS](https://tailwindcss.com/) 是什麼？ ### 官網範例 code ![](https://i.imgur.com/aglTcIb.png) <br > ### 官網介紹 >A **utility-first CSS framework** packed with classes like `flex`, `pt-4`, `text-center` and `rotate-90` that can be composed to build any design, directly in your **markup**. <br > ### Markup => Design - 直接在 HTML 裡下 class ( 或是 JSX 的 className )，就可以做出 style，節省寫 CSS 的時間 - 官網範例 - target design layout <img src="https://i.imgur.com/Poq3FxR.png" width="400px"> - 手刻 CSS 寫法 ![](https://i.imgur.com/32ud9y3.png) - 導入 Tailwind CSS 的寫法 ![](https://i.imgur.com/eNVqDUd.png) <br > ### **Utility-First** - 與其他例如 [Bootstrap](https://getbootstrap.com/docs/5.1/getting-started/introduction/), [Materialize](https://materializecss.com/), [Semantic UI](https://semantic-ui.com/) 不同，並不是以「元件」（predefined component 像是 navbar 或 button ）為出發點去做設計的 - 提供 a huge set of utilities（也就是先定義好的 class 與對應的 CSS style 設定），讓 developer 自己建立 custom 的元件 （當然 Bootstrap 等等也可以透過配置 SCSS 來做到 customize，只是 Tailwind 這套 framework 的出發點相對 lower-level，更容易去達成這件事） - 因此，使用 Tailwind CSS 不會看起來特別有 Tailwind 的視覺風格（像用 Bootstrap 做的很容易被看出來很 “Bootstrapy”） <br > ### 使用心得與專案實例分享 - **強大的搜尋功能**，完全不用記 class 名稱，要什麼 style 馬上查，直接下 class ![](https://i.imgur.com/rjjPHAX.png) ![](https://i.imgur.com/aN0aznr.png) - 預設色盤顏色較現代，擴充色盤齊全 - 基本：[Background Color](https://tailwindcss.com/docs/background-color) - 擴充：[Customizing Colors](https://tailwindcss.com/docs/customizing-colors) - 容易客製化自己的 color pallete - 真的太細的設定，還是自己下 CSS 最能客製化 <br > ### 基本、常用 class 名稱 | class 關鍵字 | meaning | example | | ------------------------ | ---------------------------------- | ---------------------------------------------------- | | p | padding | `p-2` | | m | margin | `m-4` | | t, b, l, r, x, y | top, bottom, left, right, x向, y向 | `py-4`, `mb-6`, `mx-auto` | | 特性-數字 | 尺寸 | `border-t-2`, `w-80` | | w, h | width, height | `w-3/4`, `h-2`, `w-full`, `h-screen` | | 顏色-數字 | 指定顏色與色階 | `border-gray-300` | | bg | background | `bg-blue-500` | | border | border style | `border`,`border-b-2` | | text | text style | `text-white`, | | tracking | letter spacing | `tracking-wide`, `tracking-wider`, `tracking-widest` | | leading | line-height | `leading-2`, `lading-loose` | | *as properties* | position | `fixed`, `absolute`, `relative`, `static` | | *as properties* | display box type | `block`, `inline-block`, `inline`, `flex`, `hidden` | | justify-propertyName | flex, grid main axis | `justify-center`, `justify-between`, `justify-end` | | items-propertyName | flex, grid cross axis | `items-center`, `items-end`, `items-stretch` | | hover:, focus:, active: | 狀態的 style 指定 | `hover:bg-purple-700`, `focus:ring-2` | | sm:, md:, lg:, xl:, 2xl: | responsive | `w-16 md:w-32 lg:w-48` | :::warning class 名稱要完全下對，只要與 Tailwind CSS 文件不同就完全沒有作用 ::: <br > ### 使用 config 設定 - 範例：LinkInterior 主題色與擴充色設定: [`tailwind.config.js`](https://github.com/wei-yiting/LinkInterior/blob/main/tailwind.config.js) - 常見設定：media query 的斷點 <br> ### :boom: News #### [Tailwind CSS v3.0.0-alpha.1 ](https://github.com/tailwindlabs/tailwindcss/releases) 於 2021/10/01 發佈 (尚未研究 What's new，但總之就是越來越強大了) *** ## Tailwind UI 與其他 UI library ### 什麼是 UI Library? :::info ### A UI component library is a (usually) robust set of **ready-made UI components** - ex: buttons, inputs, dialogs, and so on. They serve as building blocks for layouts. - Thanks to their modular nature, we can arrange components in many different ways to achieve unique effects. - **Each library has a distinctive look and feel**, but most of them offer theming, and their components are **customizable to a certain degree**. ::: <br > ### UI Library 的優點 - **開發速度** 不用每個 component 都從頭手刻，即使需要額外的調整細節符合設計需求，但還是比自己從頭寫 style 和互動功能還快 - **容易使用** 好的 UI Library 通常有完整、好 follow 的文件，很多時候我們只要將 code snippet 複製貼上，就可以有基本的功能了 - **外觀好看、具一致性** Developer 不需要花太多力氣就可以打造出高度一致性視覺設計出色的 layout - **Compatibility** UI Library 中提供的的 components 都已經幫忙處理了跨瀏覽器與跨裝置的問題，對前端開發輕鬆很多 - **Accessibility** 好的 UI Library 會遵守 accessibility guidelines，Developer 不用在顧慮這部分 <br > ### 受歡迎的 UI Library 列舉 :arrow_right: [Top 9 UI libraries and kits for React 2021](https://blog.logrocket.com/top-9-ui-libraries-kits-react/) #### [Material-UI](https://mui.com/) ![](https://i.imgur.com/Ou03pQZ.png) <br > #### [React Bootstrap](https://react-bootstrap.github.io/) ![](https://i.imgur.com/Nt2auGV.png) <br > #### [Ant Design](https://ant.design/docs/react/introduce) ![](https://i.imgur.com/JUunyJG.png) <br > ### [Tailwind UI](https://tailwindui.com/) #### 官方介紹 > ### Beautiful UI components, crafted with Tailwind CSS > Over 400+ professionally designed, fully responsive, expertly crafted component examples you can drop into your Tailwind projects and customize to your heart’s content. > 適用於 HTML, React, Vue ![](https://i.imgur.com/xX2m5Q6.png) <br > #### 專案經驗分享 - 當初為何選擇 Tailwind UI? *因為跟我的 wireframe 和整體視覺比較符合，需要自己調整的地方較少* - [LinkInteior](https://linkinterior.com.tw/) 專案使用了哪些 ？ *Dropdown，input field，toggle Switch, Navbar, Breadcrumb, log-in/sign up page* - 心得整理 - 優點 - 跟 Tailwind CSS 可以合併一起使用，theme color 很好處理 - 視覺符合我的需求 - 缺點 - UI Library 的 React component 相較於其他 UI Library 還沒有非常成熟 - style 沒有辦法更動太多 - Navbar 使用兩組 component 造成爆版，不好掌握 <br > *** ### 參考資料 [Tailwind CSS Crash Course](https://www.youtube.com/watch?v=UBOj6rqRUME&t=610s) [When to use a UI component library in a React project?](https://sunscrapers.com/blog/when-to-use-a-ui-component-library-in-a-react-project/)