--- title: How UnoCSS works internally with Vite? | daily.dev description: UnoCSS is an Instant On-demand Atomic CSS Engine that integrates with Vite to generate CSS. It works by extracting tokens from user code using regular... canonical: https://daily.dev/posts/how-unocss-works-internally-with-vite--o0lms6ghx twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: How UnoCSS works internally with Vite? | daily.dev og:description: UnoCSS is an Instant On-demand Atomic CSS Engine that integrates with Vite to generate CSS. It works by extracting tokens from user code using regular... og:url: https://daily.dev/posts/how-unocss-works-internally-with-vite--o0lms6ghx og:image: https://api.daily.dev/og/posts/O0LMS6GHX.png og:image:alt: How UnoCSS works internally with Vite? og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # How UnoCSS works internally with Vite? **[Community Picks](https://daily.dev/sources/community)** · 17 min read · 14 upvotes · 0 comments ## Summary UnoCSS is an Instant On-demand Atomic CSS Engine that integrates with Vite to generate CSS. It works by extracting tokens from user code using regular expressions, avoiding AST parsing for performance benefits. Different extractors support various Atomic CSS approaches, such as attributify mode. The extracted tokens are used to generate CSS code when 'virtual:uno.css' is requested, matching and grouping rules by layers. UnoCSS trade-offs highlight performance priorities over correctness and output format. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: --- Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css), [#vite](https://daily.dev/tags/vite) [View this post on daily.dev](https://daily.dev/posts/how-unocss-works-internally-with-vite--o0lms6ghx) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"How UnoCSS works internally with Vite?","url":"https://daily.dev/posts/how-unocss-works-internally-with-vite--o0lms6ghx","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/how-unocss-works-internally-with-vite--o0lms6ghx"},"datePublished":"2024-10-30T01:10:41.488Z","dateModified":"2024-12-12T07:42:36.748Z","description":"UnoCSS is an Instant On-demand Atomic CSS Engine that integrates with Vite to generate CSS. It works by extracting tokens from user code using regular...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/7ecad4704db20fe0593afb9e320304a5?_a=AQAEuiZ","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/7ecad4704db20fe0593afb9e320304a5?_a=AQAEuiZ","isAccessibleForFree":true,"articleSection":"Community Picks","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Community Picks","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1655817725/logos/community","url":"https://daily.dev/sources/community"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/how-unocss-works-internally-with-vite--o0lms6ghx","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":14},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,css,vite","timeRequired":"PT17M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Community Picks","item":"https://daily.dev/sources/community"},{"@type":"ListItem","position":3,"name":"How UnoCSS works internally with Vite?"}]} ```