{
  "id": "250f7b5e3a8ef7a2c3655539",
  "source": "solid:signals",
  "type": "github-document",
  "title": "uno",
  "content": "---\ntitle: UnoCSS\norder: 6\nmainNavExclude: true\nuse_cases: \u003e-\n  styling components, utility css, on-demand styles, vite integration, atomic\n  css\ntags:\n  - styling\n  - css\n  - unocss\n  - vite\n  - utilities\nversion: '1.0'\ndescription: \u003e-\n  Integrate UnoCSS with Solid for on-demand utility CSS. Configure Vite plugin,\n  import styles, and create efficient atomic CSS designs quickly.\n---\n\n[UnoCSS](https://unocss.dev/) is an on-demand utility CSS library that integrates seamlessly with Solid as a Vite plugin.\n\n## Install Vite plugin\n\nTo get started with UnoCSS in your Solid app:\n\n```package-install-dev\nunocss\n```\n\n## Import Vite plugin\n\nAfter installation, open your `vite.config.js` or `vite.config.ts`. The default Solid Vite configuration looks like this:\n\n```jsx\nimport { defineConfig } from \"vite\";\nimport solidPlugin from \"vite-plugin-solid\";\n\nexport default defineConfig({\n\tplugins: [solidPlugin()],\n\tserver: {\n\t\tport: 3000,\n\t},\n\tbuild: {\n\t\ttarget: \"esnext\",\n\t},\n});\n```\n\nNow, import `unocssPlugin` from \"unocss/vite\" and add it to the plugins array:\n\n```jsx\nimport { defineConfig } from \"vite\";\nimport unocssPlugin from \"unocss/vite\";\nimport solidPlugin from \"vite-plugin-solid\";\n\nexport default defineConfig({\n\tplugins: [unocssPlugin(), solidPlugin()],\n\tserver: {\n\t\tport: 3000,\n\t},\n\tbuild: {\n\t\ttarget: \"esnext\",\n\t},\n});\n```\n\nEnsure that `unocssPlugin` is ordered before `solidPlugin` to prevent certain edge cases.\n\n## Import UnoCSS\n\nIn your root `index.jsx` or `index.tsx` file, import UnoCSS:\n\n```jsx\n/* @refresh reload */\nimport \"uno.css\"\nimport { render } from \"solid-js/web\"\nimport \"./index.css\"\nimport App from \"./App\"\n\nrender(() =\u003e \u003cApp /\u003e, document.getElementById('root') as HTMLElement);\n```\n\nAlternatively, you can use the alias `import \"virtual:uno.css\"`:\n\n```jsx\n/* @refresh reload */\nimport \"virtual:uno.css\"\nimport { render } from \"solid-js/web\"\nimport \"./index.css\"\nimport App from \"./App\"\n\nrender(() =\u003e \u003cApp /\u003e, document.getElementById('root') as HTMLElement);\n```\n\n#### Support\n\nFor additional assistance, refer to the [UnoCSS/Vite integration guide](https://unocss.dev/integrations/vite) .",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/styling-components/uno.mdx",
  "metadata": {
    "path": "src/routes/guides/styling-components/uno.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 2120,
    "source_type": "github"
  },
  "hash": "0ada041be1b729596337483d48ae8c32f35fbc007b2fe99310f3382800316f69",
  "timestamp": "2026-02-23T11:43:00.188177768+01:00"
}