0 views collected around this technical thread.
The article examines the drawbacks of writing raw CSS, explains how preprocessors, naming conventions, modular approaches, CSS‑in‑JS, and atomic‑CSS frameworks like Tailwind and UnoCSS address redundancy, maintenance, and scalability, and provides best‑practice recommendations for modern front‑end development.
This article provides a comprehensive guide to UnoCSS, covering installation in Vue 3 + Vite and Nuxt 3 projects, basic syntax and interactive documentation, Iconify SVG integration, various presets and transformers, as well as practical shortcuts, responsive design, safelist handling, custom rules, theming, and dark‑mode support.
This article introduces Onionl-UI, a newly created Vue 3 component library, describing its motivation, current status, technology choices such as Vite and UnoCSS, directory layout, build configuration, component implementation, and unit testing with Vitest, offering a practical walkthrough for frontend engineers.
This article explains how to replace traditional iconfont workflows by leveraging UnoCSS's Icons preset and FileSystemIconLoader to import local SVG files, customize size and color via utility classes, and manage icons efficiently with best‑practice folder structures and rendering options.
This tutorial introduces common icon approaches, explains the Unocss icon scheme built on SVG and Iconify, and provides step‑by‑step instructions—including Vite project setup, configuration files, and usage examples—to help front‑end developers efficiently add scalable, color‑aware icons to Vue applications.
This article explains several practical front‑end problems—including iOS border‑radius loss with transforms, text‑overflow truncation on iOS, Android button focus outlines, CSS coupon hole effects, clipboard API compatibility, UnoCSS style loss after bundling, and CORS OPTIONS request failures on low‑end devices—along with clear code‑based solutions.
This article details recent updates to Varlet, a Material Design‑based mobile component library, including full desktop support, improved keyboard interactions, a Nuxt3 module for automatic component import, UnoCSS/TailwindCSS integration, and a Material Design 3 theme generator, while inviting community contributions.
This article introduces Unocss, explains how to install and configure it with Vue and Sass, details common presets, transformers, and usage tips, and shares the author’s personal experiences and recommendations for adopting atomic CSS in frontend projects.
This article examines the performance differences between the atomic CSS engines unocss and Tailwind CSS, presenting benchmark tests on a MacBook M1 using Vite and PostCSS setups, analyzing build times, the impact of CSS AST parsing, and discussing practical implications for frontend development.
This article explains how to embed any SVG icon in pure CSS using UnoCSS presets, DataURI encoding, scalable em‑based sizing, context‑aware coloring via CSS masks, and provides practical code examples for both monochrome and multicolor icons.