pi0 / nuxt-twind

⚡️ Integrate Nuxt with Twind, The smallest, fastest, most feature complete tailwind-in-js solution in existence!

Nuxt Twind Module

Integrate Nuxt with Twind, The smallest, fastest, most feature complete tailwind-in-js solution in existence!

Warning 🧪 This module was a quick prototype to try twind integration with Nuxt and not well tested.

Online playground: stackblitz

Features

• ⚡️ No build step: Get all the benefits of Tailwind without the need for PostCSS, configuration, purging, or autoprefixing.
• 🚀 SSR Transforms: Fast class transformation and Optimizations
• 😎 One low fixed cost: Twind ships the compiler, not the CSS. This means unlimited styles and variants for one low fixed cost of ~4.5kB.
• 🚗 Client HMR support: Fast reloads on client-side

Installation

Install dependencies:

# npm
npm i -D nuxt-twind twind@next @twind/preset-tailwind@next

# yarn
yarn add -D nuxt-twind twind@next @twind/preset-tailwind@next

# pnpm
pnpm i -D nuxt-twind twind@next @twind/preset-tailwind@next

Add module to nuxt.config.ts:

import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
  modules: [
    'nuxt-twind'
  ]
})

Create twind.config.ts in root of your project:

import { defineConfig } from 'twind'
import presetTailwind from '@twind/preset-tailwind'

export default defineConfig({
  presets: [presetTailwind()]
})

Now you can use classes in app:

<template>
  <div>
    <h2 class="inline-block p-3 mb-4 text-2xl font-bold bg-yellow-300">
      Hey there!
    </h2>
  </div>
</template>

Development

• Run npm run dev:prepare to generate type stubs.
• Use npm run dev to start playground in development mode.

License

MIT. Made with 💚