Next.js
// TODO: link to examples
Getting Started with UnoCSS and Next.js.
Setup
Installation
bash
pnpm add -D unocss @unocss/webpack
bash
yarn add -D unocss @unocss/webpack
bash
npm install -D unocss @unocss/webpack
Configuration
Create uno.config.ts
at the root of your project.
ts
import {
defineConfig,
presetAttributify,
presetIcons,
presetUno,
presetWebFonts
} from 'unocss'
export default defineConfig({
presets: [
presetUno(),
// ...
],
})
Add plugin
Then add UnoCSS as a plugin to webpack through your next.config.js
.
js
// next.config.js
const UnoCSS = require('@unocss/webpack').default
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
webpack: (config) => {
config.plugins.push(
UnoCSS(),
)
return config
},
}
module.exports = nextConfig
Import stylesheets
Then import uno.css
in _app.tsx
.
tsx
import type { AppProps } from 'next/app'
// _app.tsx
import '@unocss/reset/tailwind.css'
import 'uno.css'
function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}
export default MyApp
Usage
Style your components with unocss!
tsx
/* index.tsx */
const Home: NextPage = () => {
return (
<>
<main className="py-20 px-12 text-center flex flex-col items-center gap-20px">
<span text="blue 5xl hover:red" cursor="default">Nextjs</span>
<div className="i-carbon-car inline-block" text="4xl" />
<button className="btn w-10rem">Button</button>
</main>
</>
)
}
Hot Module Reload
To support HMR you have to opt-out of webpack's caching.
js
// next.config.js
const nextConfig = {
reactStrictMode: true,
webpack: (config) => {
+ config.cache = false
config.plugins.push(UnoCSS())
return config
}
}
Troubleshooting
Error concerning virtual module
bash
Error: ENOENT: no such file or directory, open '.../_virtual_/__uno.css'
Try deleting the .next
directory and restart the dev server.
Other
You might need to bump your target up to at least es2015
in your tsconfig.json
to build your project.
Files with .js
extension are not supported by default. Change your file extensions to .jsx
or try to include js files in your config with include: /\.js$/
. Learn more.