Using hover Variant in Dark Mode
The hover variant is only for light mode. We can compose dark and hover to take effect.
タグ : TailwindCSS
Card with Two Buttons
For Card layout, we often add 2 buttons at the bottom. One is on the extreme left, and the other is on the extreme right.
Using justify-evenly to Space out the Horizontal Space
justify-evenly makes all Flex Items spaced out evenly, even space before the first item and after the last item.
Using justify-around to Space out the Horizontal Space
justify-around makes all Flex Items spaced out evenly, but space before the first item and after the last item are half as much as space between the items.
Using justify-between to Space out the Horizontal Space
justify-between makes all Flex Items spaced out evenly, but the first item is on the extreme left and the last item is on the extreme right.
Using justify-center to Horizontal Center
justify-center makes Flex Items justify to the center.
Using justify-end to Horizontal Right Align
justify-end makes Flex Items justify from right to left.
Using justify-start to Horizontal Left Align
justify-start makes Flex Items justify from left to right. This is the default utility for flex.
Creating Responsive Fixed Navbar
Responsive Navbar is the essential component in every modern Web design. This can be done by only Alpine and TailwindCSS without any package.
Creating Responsive Auto-hidden Navbar
Responsive auto-hidden Navbar is the essential component in every modern Web design. This can be done by only Alpine and TailwindCSS without any package.
Using translate to Move Element
Not only use x-show to hide the element, but we can also use -translate-x-full or -translate-y-full to hide the element.
Using duration with transition
When using transtion for CSS Transition, we can add duration to achieve a more obvious visual effect.
Using float for Three Columns Layout
Three columns layout is a common layout for modern Web design. This can be done by float.
Using float for Two Columns Layout
Two columns layout is a common layout for modern Web design. This can be done by float.
Using block and hidden for Responsive Design
Using block and hidden with md and lg variant, we can toggle different blocks to display by the device without any JavaScript.
Using shrink for Controlling How Flex Items Shrink
When the width of all Flex items is larger than the parent element, we can use shrink to control how Flex items shrink.
static Overview
static is the default utility for position. That’s why we seldom use static in a practical project.
sticky Overview
sticky is very similar to fixed. fixed is locked at the beginning, but sticky is stuck only when scrolling to the specified position.
absolute Overview
We can set the position to the element by absolute, regardless of the actual HTML position.
Using relative with Overlap Priority
Since relative is offset by the original element, it may overlap other elements. We have to consider overlap priority to determine the final HTML result.
Using relative for Position
When using top, bottom, left and right with relative, it is positioned to the original element.
relative Overview
fixed and absolute will create a new layer; relative remains in the original layer.
Using absolute for Layout
By absolute with top, bottom, left, right, and m-auto, we can implement some special layout.
Using fixed for Layout
By fixed with top, bottom, left, right, and m-auto, we can implement some special layout.
Using absolute for Position
When using top, bottom, left and right with absolute, it is placed relative to its closest positioned ancestor.
Using fixed for Position
When using top, bottom, left and right with fixed, it is positioned relative to the window element.
fixed Overview
fixed locks the element at the specified position, regardless of scrolling to another position.
Simple Button with TailwindCSS
When using TailwindCSS, <button> has been reset by CSS Reset. We have to use utilities to compose a simple button.
Integrating TEAstack with 11ty
11ty is great for JAMstack, but we have to use vanilla JavaScript and CSS to create templates. With Alpine and TailwindCSS, we can create templates by declarative style directly in HTML, and we can finally use HTMLMinifier to optimize our HTML under production mode.
Integrating TailwindCSS with 11ty
TailwindCSS is great for JAMstack, but we have to integrate TailwindCSS with 11ty manually.
Using absolute for Scrolling
absolute and fixed are very similar, but there are some subtle differences.
實作 Menu Treeview
Menu 若使用 Treeview，通常都是 URL 即可，若要能支援無限階層，則必須在 Component 內 Recursive 使用自身 Component。
實作唯讀 Treeview
若資料本身具有階層特性，則適合使用 Treeview 呈現，若要能支援無限階層，則必須在 Component 內 Recursive 使用自身 Component。
實作可編輯 Treeview
若資料本身具有階層特性，則適合使用 Treeview 呈現，若要能支援無限階層，則必須在 Component 內 Recursive 使用自身 Component。