#Development #Techniques
Fluid everything else · “Responsive design should be almost invisible to the user.” https://ilo.im/160rfm
_____
#ModernCSS #Typography #ContainerQueries #CssClamp #CssCalc #FluidDesign #ResponsiveDesign #WebDev #Frontend #CSS
💡 #FluidTailwindCSS: Uses #CSSclamp to create responsive designs with smoother scaling between breakpoints.
🛠️ #Utilities: Works with all #Tailwind #CSS utilities, including plugins. Offers full #IntelliSense support.
💻 #Installation: Install via npm (npm install -D fluid-tailwind), add plugin and extractor to tailwind.config.js.
🧩 #Integration: First-class support for #tailwindmerge via a dedicated plugin.
⚠️ #Limitations: Requires matching units for fluid utility start/end values and breakpoints. Provides rem replacements for default breakpoints and some font sizes.
➡️ #opensource project.
#Development #Explorations
What if you used Container Units for… everything? · “Surprise, surprise, that it’s not that easy.” https://ilo.im/15zotb
_____
#Layout #ResponsiveDesign #WebDesign #WebDev #CSS #ContainerQuery #ContainerUnit #CssClamp
Excited to share `tailwindcss-fluid-font-size`, a new fluid typography Tailwind plugin.
I’ve been iterating on Tailwind approaches to fluid typography for a couple years. tailwindcss-fluid-font-size is more flexible and, to me, the most ergonomic and idiomatically “Tailwindy” of the solutions I’ve built or read about.
Open minded Tailwind haters might even be interested in at least the design.
https://tailwindcss-fluid-font-size.olets.dev/
#Tailwind #TailwindCSS #FluidTypography #CSS #CSSClamp #FrontEnd
#Development #Techniques
Fluid typography · Responsive text without using CSS Media Queries https://ilo.im/1589ir
_____
#WebDev #WebDesign #ResponsiveDesign #Typography #Fonts #Frontend #CSS #CssClamp
