taildwindcss config not applied in nuxt3 app-CodePudding

I am still very much at the start of a new project using nuxt3. I installed tailwindcss for quick themeing and prototyping. I followed the basic setup on the documentation for the tailwindcss plugin for nuxt 3.

The problem is, that the background color for the welcome message is not applied (the CSS property also does not show up on the rendered HTML). When I change the CSS to something like this: , then it works.

I could not find any similar issues, however I'm sure I can't be the first/only one stumbling over this. I appreciate any hints.

**Edit: ** The issue was the import syntax in the tailwind configuration file. Changing the import to the require syntax solved the issue.

My code is as follows:

nuxt.config.js

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/robots',
    '@nuxtjs/color-mode',
    '@nuxtjs/tailwindcss',
    '@nuxtjs/i18n',
  ],
  i18n: {
    locales: [
      {
        code: 'de', name: 'Deutsch', iso: 'en-US', file: 'de.js'
      },
      {
        code: 'en', name: 'English', iso: 'de-CH', file: 'en.js'
      },
    ],
    defaultLocale: 'de',
    strategy: 'prefix_except_default',
    langDir: 'languages',
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'i18n_redirected',
      redirectOn: 'root',  // recommended
    },
  },
  buildModules: [],
  robots: {},
  tailwindcss: {
    configPath: 'tailwind.config.js',
    exposeConfig: false,
    injectPosition: 0,
  }
})

tailwind.config.js

import defaultTheme from 'tailwindcss/defaultTheme'

export default {
  theme: {
    extend: {
      colors: {
        primary: defaultTheme.colors.green
      }
    }
  }
}

app.vue

<template>
    <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

layouts/default.vue

<template>
  <div>
    <LayoutHeader/>
    <slot />
    <LayoutFooter/>
  </div>
</template>

pages/index.vue

<template>
  <div>
    <div >Welcome to the homepage</div>
  </div>
</template>

CodePudding user response：

The main issue being that tailwind.config.css is not a valid configuration file because we're using JS here, hence why npx tailwindcss init is the recommended way to safely generate the configuration file (the config itself is a JS file, not a CSS one).

I have successfully installed it with the following tailwind.config.js file

const colors = require('tailwindcss/colors')

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

Here is a reference to the documentation: https://tailwindcss.com/docs/customizing-colors#naming-your-colors

Here is a working github repo.