Meta tags:
description=Getting started with UnoCSS and Next.js.;
author=Anthony Fu;

Headings (most frequently used words):

next, js, guides, integrations, setup, usage, license, installation, configuration, import, stylesheets,

Text of the page (most frequently used words):
unocss (25), next (14), #import (11), config (11), classname (10), text (10), default (9), export (9), reset (9), postcss (9), presets (9), variable (8), geist (8), css (8), page (7), button (6), create (6), const (6), font (6), main (5), return (5), tsx (5), html (5), children (5), app (5), from (5), the (4), span (4), center (4), flex (4), function (4), your (4), body (4), geistmono (4), geistsans (4), metadata (4), latin (4), subsets (4), geist_mono (4), globals (4), file (4), add (4), presetwind3 (4), defineconfig (4), uno (4), bash (4), integrations (4), extension (4), overview (4), extractor (4), license (3), astro (3), nuxt (3), this (3), style (3), tailwind (3), layout (3), getting (3), started (3), svelte (3), safelist (3), 2021 (2), present (2), anthony (2), mit (2), btn (2), 10rem (2), carbon (2), car (2), inline (2), block (2), 4xl (2), div (2), nextjs (2), blue (2), 5xl (2), hover (2), red (2), cursor (2), col (2), items (2), gap (2), 20px (2), home (2), with (2), lang (2), rootlayout (2), generated (2), description (2), title (2), mono (2), sans (2), google (2), all (2), jsx (2), content (2), mjs (2), root (2), project (2), presetwebfonts (2), preseticons (2), presetattributify (2), bun (2), npm (2), yarn (2), pnpm (2), you (2), examples (2), zed (2), jetbrains (2), ide (2), plugin (2), code (2), lsp (2), support (2), twoslash (2), eslint (2), cli (2), runtime (2), webpack (2), scoped (2), vite (2), extracting (2), why (2), navigation (2), variants (2), extractors (2), attributify (2), transformers (2), guide (2), copyright, released, under, previous, pager, last, updated, suggest, changes, components, usage, antialiased, reactnode, react, readonly, type, then, stylesheets, plugins, configuration, install, installation, setup, and, check, example, are, llm, can, read, better, optimized, documentation, for, markdown, format, guides, sidebar, top, menu, appearance, contributing, release, notes, v66, team, tutorial, playground, interactive, docs, resources, arbitrary, mdc, pug, compile, class, directives, variant, group, rem, tagify, legacy, compat, web, fonts, typography, icons, wind4, wind3, mini, community, autocomplete, layers, preflights, theme, shortcuts, rules, concepts, ctrl, search, skip,

Text of the page (random words):
next js skip to content unocss search ctrl k main navigation guide guide getting started why unocss presets style reset config file extracting safelist integrations overview integrations vite nuxt next astro svelte scoped webpack runtime cli postcss eslint twoslash lsp support vs code extension jetbrains ide plugin zed extension examples config config file concepts overview rules variants shortcuts theme extractors preflights safelist layers presets transformers autocomplete presets overview community presets presets mini wind3 wind4 icons attributify typography web fonts legacy compat tagify rem to px transformers variant group directives compile class attributify jsx extractors pug extractor mdc extractor svelte extractor arbitrary variants extractor resources interactive docs playground tutorial team v66 8 1 release notes contributing appearance menu return to top sidebar navigation guides getting started why unocss presets style reset config file extracting safelist integrations overview vite nuxt next astro svelte scoped webpack runtime cli postcss eslint twoslash lsp support vs code extension jetbrains ide plugin zed extension examples config presets on this page are you an llm you can read better optimized documentation at integrations next md for this page in markdown format next js getting started with unocss and next js check the example setup installation pnpm yarn npm bun bash pnpm add d unocss unocss postcss unocss reset bash yarn add d unocss unocss postcss unocss reset bash npm install d unocss unocss postcss unocss reset bash bun add d unocss unocss postcss unocss reset configuration create uno config ts or uno config js at the root of your project uno config ts uno config js ts import defineconfig presetattributify preseticons presetwebfonts presetwind3 from unocss export default defineconfig presets presetwind3 js import defineconfig presetattributify preseticons presetwebfonts presetwind3 from unocss export default defineconfig presets presetwind3 create postcss config mjs at the root of your project postcss config mjs js export default plugins unocss postcss content app html js ts jsx tsx import stylesheets add unocss all in globals css globals css css unocss all then import unocss reset tailwind css in your layout file layout tsx layout js tsx import type metadata from next import geist geist_mono from next font google import unocss reset tailwind css import globals css const geistsans geist variable font geist sans subsets latin const geistmono geist_mono variable font geist mono subsets latin export const metadata metadata title create next app description generated by create next app export default function rootlayout children readonly children react reactnode return html lang en body classname geistsans variable geistmono variable antialiased children body html js import geist geist_mono from next font google import unocss reset tailwind css import globals css const geistsans geist variable font geist sans subsets latin const geistmono geist_mono variable font geist mono subsets latin export const metadata title create next app description generated by create next app export default function rootlayout children return html lang en body classname geistsans variable geistmono variable children body html usage style your components with unocss page tsx page js tsx export default function home return main classname py 20 px 12 text center flex flex col items center gap 20px span classname text blue text 5xl text hover red cursor default nextjs span div classname i carbon car inline block text 4xl button classname btn w 10rem button button main js export default function home return main classname py 20 px 12 text center flex flex col items center gap 20px span classname text blue text 5xl text hover red cursor default nextjs span div classname i carbon car inline block text 4xl button classname btn w 10rem button button main license mit license 2021 present anthony fu suggest changes to this page last updated pager previous page nuxt next page astro released under the mit license copyright 2021 present anthony fu