CODEWITHSUNDEEP
tailwind-cssnuxt3.js
user11846775
user11846775

Reputation:

White screen when integrating tailwind v3.3.2 with nuxt3

I am trying to integrate tailwindcss with my new nuxt3 application. I followed the docs on the tailwind site for nuxt3 exactly

https://tailwindcss.com/docs/guides/nuxtjs#3

I am not using an app.vue file. I am using the pages/index.vue set up

and I only get a blank white screen when I run npm run dev. Below is an image of my directory structure:

enter image description here

My tailwind.config.js is:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

My nuxt.config.ts is:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ["~/assets/css/tailwind.css"],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
});

and pages/index.vue is simply:

<template>
  <h1 class="text-3xl font-bold underline">Hello world!</h1>
</template>

Is there a known issue or something with the docs that I am just not seeing on stackoverflow?

And before you mention the tailwind plugin for nuxt, don't. I do not want to use the community plugin.

Oddly enough if I use the app.vue setup everything works. So, how do I get it to work with the pages/index.vue set up?

Upvotes: 0

Views: 136

Answers (1)

user11846775
user11846775

Reputation:

I forgot when you use the layouts directory you need to have content inside of it. I hadn't made it that far yet. smh

Upvotes: 0

Related Questions