How to install Tailwind in Vue3 + Vite? - css

Question

I followed these instructions exactly:
https://tailwindcss.com/docs/installation
but the dropdown that's supposed to look like this:
https://tailwindui.com/components/application-ui/elements/dropdowns
still looks like garbage:
https://i.imgur.com/uViQHdu.png
I installed Tailwind and used init:
https://imgur.com/nGWspSt
I filled in the "tailwind.config.js" like this:
tailwind.config.js
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/components/DropdownVue/DropdownVue.vue"], <---INCLUDED DROPDOWN FILE
theme: {
extend: {},
},
plugins: [],
};
I created an "index.css" and imported the Tailwind modules in it like this:
index.css
#tailwind base;
#tailwind components; <-----INCLUDED IMPORTS
#tailwind utilities;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Noto Serif", serif, Ariel, Helvetica, sans-serif;
background: #d7d7d7;
}
img {
width: 100%;
object-fit: contain;
}
#import url("https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap");
I started the build process and got an "output.css" file
https://i.imgur.com/mOKDwuc.png
that I included in my "index.html" file like this:
<link href="/dist/output.css" rel="stylesheet">
and at that point you are supposed to be done and your Tailwind components should be working according to those instructions.
BUT, they didn't work and I then found a more specific page for installing Tailwind with Vue + Vite:
https://tailwindcss.com/docs/guides/vite
and the directions are pretty much the same, only it says to npm install like this:
npm install -D tailwindcss postcss autoprefixer
and previously I only installed "tailwindcss". So I ran the install on the other 2 packages hoping that would fix it, but it didn't.
What part did I get wrong here? Can someone help me fix this?
This is all the relevant code again:
tailwind.config.js
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/components/DropdownVue/DropdownVue.vue"], <---INCLUDED FILE
theme: {
extend: {},
},
plugins: [],
};
index.css
#tailwind base;
#tailwind components; <-----INCLUDED IMPORTS
#tailwind utilities;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Noto Serif", serif, Ariel, Helvetica, sans-serif;
background: #d7d7d7;
}
img {
width: 100%;
object-fit: contain;
}
#import url("https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap");
App.vue
<template>
<NavBar :clicked="clicked" #toggleDrawer="toggleMenu()" />
<BackDrop :clicked="clicked" />
<SideDrawer :clicked="clicked" />
<router-view></router-view>
</template>
<style>
#import "./index.css"; <-------IMPORTED STYLES
</style>
DropdownVue.vue (THE TAILWIND COMPONENT IM TRYING TO USE)
<template>
<Menu as="div" class="relative inline-block text-left">
<div>
<MenuButton
class="inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100"
>
Options
<ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" aria-hidden="true" />
</MenuButton>
</div>
<transition
enter-active-class="transition ease-out duration-100"
enter-from-class="transform opacity-0 scale-95"
enter-to-class="transform opacity-100 scale-100"
leave-active-class="transition ease-in duration-75"
leave-from-class="transform opacity-100 scale-100"
leave-to-class="transform opacity-0 scale-95"
>
<MenuItems
class="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
>
<div class="py-1">
<MenuItem v-slot="{ active }">
<a
href="#"
:class="[
active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
'block px-4 py-2 text-sm',
]"
>Account settings</a
>
</MenuItem>
<MenuItem v-slot="{ active }">
<a
href="#"
:class="[
active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
'block px-4 py-2 text-sm',
]"
>Support</a
>
</MenuItem>
<MenuItem v-slot="{ active }">
<a
href="#"
:class="[
active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
'block px-4 py-2 text-sm',
]"
>License</a
>
</MenuItem>
<form method="POST" action="#">
<MenuItem v-slot="{ active }">
<button
type="submit"
:class="[
active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
'block w-full px-4 py-2 text-left text-sm',
]"
>
Sign out
</button>
</MenuItem>
</form>
</div>
</MenuItems>
</transition>
</Menu>
</template>
<script setup>
import { Menu, MenuButton, MenuItem, MenuItems } from "#headlessui/vue";
import { ChevronDownIcon } from "#heroicons/vue/20/solid";
</script>

Answer 1

The content property in your tailwind.config.js should be:
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],