Nuxt 3 + Tailwind CSS 3 Starter
This is a minimal starter template for Nuxt 3 projects with Tailwind CSS 3. It includes a simple template pages/index.vue and a Tailwind UI example component in pages/features.vue. To make the Tailwind UI component work this setup includes heroicons. You can either clone this repo or use the steps below to to create a new Nuxt 3 + Tailwind CSS 3 project.
Steps
Start by creating a new Nuxt 3 project named hello-tailwind-3 with the following command:
npx nuxi init hello-tailwind-3
Install Tailwind CSS as a development dependency with the following command:
npm install -D tailwindcss
Create your tailwind.config.js file with the following content:
npx tailwindcss init
Open up tailwind.config.js and add the paths to all of your template files under content:
module.exports = {
content: [
"./components/**/*.{js,vue,ts}",
"./layouts/**/*.vue",
"./pages/**/*.vue",
"./plugins/**/*.{js,ts}",
"./nuxt.config.{js,ts}",
],
theme: {
extend: {},
},
plugins: [],
}
Create a new file assets/css/tailwind.css and add the following add the @tailwind directives for each of Tailwind’s layers:
@tailwind base;
@tailwind components;
@tailwind utilities;
Open up nuxt.config.js and add the following:
import { defineNuxtConfig } from 'nuxt3'
// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
build: {
postcss: {
postcssOptions: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
},
},
css: [
"~/assets/css/tailwind.css"
],
})
If you want to learn more about what the code above is doing visit the documentation. The css option will allow you to define a css file that you want to set globally and include in any page.
Vue Templates
To get started you will need to remove app.vue and create a new page pages/index.vue with the following content:
<template>
<div class="container mx-auto bg-gray-300 p-8">
<h1 class="font-bold text-gray-600 text-lg">Hello, Tailwind 3!</h1>
</div>
</template>
If you start the app with npm run dev you should be able to visit http://localhost:3000/ and see the page you just created along with Tailwind 3 in action.
Tailwind UI
I also included a Tailwind UI example component in pages/features.vue which you can use to test out your Tailwind CSS 3 configuration. To use this example component you will need to install the following dependencies:
npm install @heroicons/vue
Create pages/features.vue with the following content:
<template>
<div class="py-12 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Transactions</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
A better way to send money
</p>
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
Lorem ipsum dolor sit amet consect adipisicing elit. Possimus magnam voluptatum cupiditate veritatis in accusamus quisquam.
</p>
</div>
<div class="mt-10">
<dl class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
<div v-for="feature in features" :key="feature.name" class="relative">
<dt>
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
<component :is="feature.icon" class="h-6 w-6" aria-hidden="true" />
</div>
<p class="ml-16 text-lg leading-6 font-medium text-gray-900">{{ feature.name }}</p>
</dt>
<dd class="mt-2 ml-16 text-base text-gray-500">
{{ feature.description }}
</dd>
</div>
</dl>
</div>
</div>
</div>
</template>
<script>
import { AnnotationIcon, GlobeAltIcon, LightningBoltIcon, ScaleIcon } from '@heroicons/vue/outline'
const features = [
{
name: 'Competitive exchange rates',
description:
'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.',
icon: GlobeAltIcon,
},
{
name: 'No hidden fees',
description:
'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.',
icon: ScaleIcon,
},
{
name: 'Transfers are instant',
description:
'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.',
icon: LightningBoltIcon,
},
{
name: 'Mobile notifications',
description:
'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.',
icon: AnnotationIcon,
},
]
export default {
setup() {
return {
features,
}
},
}
</script>
If you start the app with npm run dev you should be able to visit http://localhost:3000/features and see the page you created with Tailwind UI.
124 Dec 25, 2022
26 Jan 4, 2023
4 Nov 28, 2022
9.8k Jan 3, 2023
12 May 12, 2021
51 Jan 8, 2023
11 Dec 13, 2022
7 Sep 30, 2022
28 Nov 27, 2022