Why tailwind ui not rendered correctly in vue?

Question

I have installed tailwind according to the documentation in tailwindcss.com with vue in laravel. But its rendered like this below -

Why ?

Configuration:

Installed tailwindcss using commands

npm install -D tailwindcss
npx tailwindcss init

2)In tailwind.config.js added

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

3)In input.css added

@tailwind base;
@tailwind components;
@tailwind utilities;

For extra plugins ran this command

npm install @headlessui/vue @heroicons/vue

In main.js:

import { createApp } from 'vue'
import store from './store'
import App from './App.vue'
import './input.css'

createApp(App)
    .use(store)
    .mount('#app')

I don't think there's enough. You don't have `.vue` in your tailwind config file, and no `app.js` provided. What document did you followed exactly — Huy Phạm, May 04 '22 at 08:22
Try adding `input.css` in `main.js`. step 5 of [site](https://tailwindcss.com/docs/guides/vite) — Pouya M, May 04 '22 at 08:24
Added input.js in main.js. But where to add .vue in tailwind.config.js ? — alprazolam, May 04 '22 at 08:36

score 0 · Answer 1 · answered May 04 '22 at 15:07

0

Try using PostCSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

https://tailwindcss.com/docs/installation/using-postcss

answered May 04 '22 at 15:07

power-cut

1,310
1
14
30

Still not working. I have deleted all the packages of tailwind from package.json . Installed again from https://tailwindui.com/documentation#using-vue – alprazolam May 04 '22 at 15:31
And taking templates from https://tailwindui.com/#product-application-ui . Though its working but not rendered correctly. Images are becoming large. Why is this happening ? – alprazolam May 04 '22 at 15:33

score 0 · Answer 2 · answered Jun 13 '22 at 06:13

on tailwind.config.js:

module.exports = {
    purge: 
        "./src/**/*.html",
        "./src/**/*.vue",
        "./src/**/*.jsx",
    ],
    //
};

it's simply adding the ones in the purge, after that, the vue is rendered properly, I think that the problem is that we haven't included vue on the tailwind configuration.

score 0 · Answer 3 · answered Oct 18 '22 at 13:55

0

There are two tailwind.config.js files, one at the project level and the other at the vue directory. Copy and paste the following at the vue directory level

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{html,js,vue,js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms')
  ],


}

answered Oct 18 '22 at 13:55

Terzux Tech

11
1

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 21 '22 at 12:15

Why tailwind ui not rendered correctly in vue?

3 Answers3