data-service-management

Getting Started with UnoCSS and Nextjs

This example is a Next project bootstrapped with create-next-app.

Configuration

1. Installing the dependencies:

npm i -D unocss @unocss/postcss

2. Add these files in the root of your project

// @filename uno.config.ts
import { defineConfig, presetUno } from 'unocss'

export default defineConfig({
  presets: [
    presetUno(),
    // ...
  ],
})

// @filename postcss.config.js
module.exports = {
  plugins: {
    '@unocss/postcss': {
      // Optional
      content: ['**/*.{html,js,ts,jsx,tsx}'],
    },
  },
}

3. Update your globals.css file with UnoCSS

// @filename src/app/globals.css
@import '@unocss/reset/tailwind.css';
@unocss all;

Usage

Style your components using UnoCSS!

// @filename src/app/page.tsx
export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
        <p className="...">
          Get started by editing&nbsp;
          <code className="font-mono font-bold">src/app/page.tsx</code>
        </p>
      </div>
    </main>
  )
}

Bonus

Attributify preset

You can also import from unocss package other presets such as presetAttributify to enable attributify mode

// @filename uno.config.ts
import { presetAttributify } from 'unocss'

export default defineConfig({
  presets: [
    presetAttributify(),
    // ...
  ],
})

Then you can style your components in attributify mode

// @filename src/components/Resources.tsx
export const Resources: React.FC<{ resources: Resource[] }> = ({ resources }) => {
  return (
    <div
      m="b-32 lg:b-0"
      grid="~ lg:cols-4" // ~ is used as a prefix for self-referencing
      text="center lg:left"
    />
  )
}

For TypeScript support while using AttributifyAttributes make sure to read: Attributify TypeScript Support

Icons preset

You can also import from unocss package presetIcons to enable using the Icons Preset for any icon with Pure CSS for UnoCSS.

// @filename uno.config.ts
import { presetIcons } from 'unocss'

export default defineConfig({
  presets: [
    presetIcons({
      // Optional
      extraProperties: {
        'display': 'inline-block',
        'vertical-align': 'middle',
      },
    }),
    // ...
  ],
})

Then you can use any of the available icons:

<span className='i-lucide:arrow-up-right' />

For more information on UnoCSS please visit the Docs UnoCSS.dev