使用 HTML Attribute Folder 隱藏 Utility
TailwindCSS 一個常被詬病的地方就是 class attribute 有冗長的 utility，導致 HTML 的可讀性不佳，透過 HTML Attribute Folder 可將所有 utility 加以隱藏，只留下 class，當需要維護時再點擊 class 展開即可。
タグ : TailwindCSS
Integrating TailwindCSS with Hugo
TailwindCSS is great for JAMstack, but we have to integrate TailwindCSS with Hugo manually.
Sorting TailwindCSS Utilities Automatically with Prettier
People have been talking about the best way to sort your utility classes in TailwindCSS projects for many years. TailwindCSS announced the official Prettier plugin to solve this problem.
Using selection to Style the Selected Text
We can use selection modifier to style the selected text.
Using after to Create Required Field
We often show a red * to indicate a required field. This can be done by after modifier.
Using before to Create a Fun Background for an Image
With new before and after modifiers, we can create lots of fun effects to decorate the element.
You might not need before in TailwindCSS
It’s worth noting that you don’t really need ::before and ::after pseudo-elements for most things in TailwindCSS projects — it’s usually simpler to just use a real HTML element.
Using $refs to Access the Element
$refs is just like document.getElementById or docuement.querySeletor to access the DOM element.
Using after to Decorate the Element
We can use after modifier to add a pseudo element on the fly and apply utility.
Using before to Decorate the Element
We can use before modifier to add a pseudo element on the fly and apply utility.
Using first-letter to Style the First Letter of the Paragraph
We can use first-letter modifier to style the first letter of the paragraph.
Using group-hover to Style the Child Element
hover modifier styles the element when hovered, whereas group-hover modifier style the child element when hovered.
Using visited to Style the Visited Element
We can use visited modifier to style the element when visited.
Using hover to Style the Hovered Element
We can use hover modifier to style the element when hovered.
Using active to Style the Clicked Element
We can use active modifier to style the element when clicked.
Using even to Style the Even Rows of the List
We can use even modifier to style the even rows of the List.
Using odd to Style the Odd Rows of the List
We can use odd modifier to style the odd rows of the List.
Using last-of-type to Style the Last Row of the List
We can use last-of-type modifier to style the last row of the List.
Using first-of-type to Style the First Row of the List
We can use first-of-type modifier to style the first row of the List.
Using last to Style the Last Row of the List
We can use last modifier to style the last row of the List.
Using first to Style the First Row of the List
We can use first modifier to style the first row of the List.
Using first-line to Style the First Line of the Paragraph
We can use first-line modifier to style the first line of the paragraph.
Using uppercase to Convert Text to Uppercase
We can use uppercase to convert text to uppercase without JavaScript.
Using lowercase to Convert Text to Lowercase
We can use lowercase to convert text to lowercase without JavaScript.
Using normal-case to Preserve the Original Casing
We can use normal-case to reset capitalization at different breakpoints.
Using capitalize to Convert Text to Title-case
We can use capitalize to convert text to title-case without JavaScript.
Flexbox Overview
Flexbox is a new layout for CSS 3. We can use a simple way for layout instead of inline-block or float.
Using basis to Control the Size of Flex Items
We can use basis to set the initial size of Flex items.
Using w-max to Set the Largest Width without Wrapping
We can use w-max to let the content decide the largest width of the box without wrapping.
Using w-min to Set the Smallest Width without Overflowing
We can use w-min to let the content decide the smallest width of the box without overflowing.
Making inline-block Horizontal Center
Since inline-block makes the width of the element shrink to fit the content, we can’t use inline-block mx-auto to make the element horizontal center.
Adjusting Text Alignment by the Content
The content from API may be short like one or two words, or lengthy like more than one line. We want to adjust the text alignment of the content by CSS automatically.
Using w-full to set 100% of Parent Width
w-auto is width: auto, and w-full is width: 100%. But it seems no difference in TailwindCSS?
Using h-screen to Set Hight as Viewport
We can use h-screen to set the height of the element as viewport.
Using w-screen to Set Width as Viewport
We can use w-screen to set the width of the element as viewport.
Using min-w-fit to Keep Minimum Width as Content Width
If we don’t set width of the element, the width is automatically adjusted by the viewport. We can apply min-w-fit to ensure minimum width as content width.
min-w Overview
If we don’t set width of the element, the width is automatically adjusted by the viewport. We can apply min-w to ensure a minimum width.
Using w-fit for Horizontal Center
Block element uses w-auto for width. It will occupy the full width of the parent element. We can use w-fit to make width as the content width, then use m-auto to adjust margin automatically for horizontal center.