Nuxt Tailwind Components

DEVELOPMENT ON GOING : DON'T USE

Use beautiful Tailwind CSS components inspired by Tailwind UI with your Nuxt project. (Nuxt 2 & Nuxt 3 compatible).

Tailwind install

You have to install Tailwind and dependencies.

For Nuxt 2

npm install -D tailwindcss postcss@latest autoprefixer@latest @nuxt/postcss8
npx tailwindcss init

For Nuxt 3

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

See full installation and configuration of Tailwind for Nuxt.js here.

Install

Install by running the following command with your favorite package manager

npm install --save nuxt-tailwind-components
or
yarn install --save nuxt-tailwind-components

This package uses nuxt-tailwind-heroicons

Configuration

Add the package in nuxt.config.[js, ts]

For Nuxt 3

export default defineNuxtConfig({
    //...
  modules: [
    'nuxt-tailwind-components'
  ]
    //...
})

For Nuxt 2

export default {
    //...
  buildModules: [
    'nuxt-tailwind-components'
  ]
    //...
}

In the tailwind.config.js file, add package to content part :

module.exports = {
    content: [
        "./nodes-modules/nuxt-tailwind-components/components/*.vue"
    ]
    //...
}

Usage

Prefix of components is <tw-. You can use it at like :

<tw-alert title="This is awesome !"/>

Documentation will be soon available.

And now enjoy ! 🚀

Contribute

Open a pull request or issue if you have any recommendation.

Licence

This project is licensed under the terms of the MIT open source license. Please refer to LICENSE for the full terms.