DEVELOPMENT ON GOING : DON'T USE
Use beautiful Tailwind CSS components inspired by Tailwind UI with your Nuxt project. (Nuxt 2 & Nuxt 3 compatible).
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 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
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"
]
//...
}
Prefix of components is <tw-
. You can use it at like :
<tw-alert title="This is awesome !"/>
Documentation will be soon available.
Open a pull request or issue if you have any recommendation.
This project is licensed under the terms of the MIT open source license. Please refer to LICENSE for the full terms.