0.1.5 โข Published 2 years ago
nuxt-twind v0.1.5
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 ๐