deploymenttailwind-cssgithub-pagesnuxt3.js

Deploy not showing Tailwind classes in Nuxt3


My page is a simple static page that I deployed with github pages, I have the workflow set up, and all settled, unfortunately in the deployed version my tailwind classes are not created in the css, only a few not related to tailwind are showed.

In localhost it works as it should, the problem it's only in the deployed version.

Here my tailwind.config.ts:

import type { Config } from "tailwindcss";

const config: Config = {
  theme: {
    extend: {},
  },
  plugins: [],
  content: ["./app.vue"],
  safelist: [],
};

export default config;

Here my nuxt.config.ts:

export default defineNuxtConfig({
  ssr: true,
  nitro: {
    preset: "static",
  },
  app: {
    baseURL: "/",
    buildAssetsDir: "/_nuxt/",
  },
  compatibilityDate: "2024-11-01",
  devtools: { enabled: true },
  pages: false,
  modules: ["@nuxtjs/tailwindcss"],
  css: ["@/assets/css/tailwind.css"],
  postcss: {
    plugins: {
      "postcss-color-gray": {},
    },
  },
  tailwindcss: {
    exposeConfig: true,
    configPath: "tailwind.config.js",
  },
});

I leave here a link to my repo, where I'm facing this issue.

I was expecting the correct style of the page I developed.


Solution

  • Problem solved; changing the "custom deploy" in true solved the problem.