split used css to separate css files after production build.

[mnaviddoost]

hello my friends.
i use from nuxt 3 and tailwind module.
after build project, all of used tailwind css classess, injected in head tag as internal css styles and this is not ok for SEO.
i want all of used class injected in separate css files after production build.
Thank you in advance for your help

[ineshbose]

I thought that CSS was external to your head in Nuxt 3-rc.9 onwards and moved to inlining it in experimental. Do you mind sharing your configuration?

[mnaviddoost]

yes. sure @ineshbose
this is my nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config


export default defineNuxtConfig({
    devtools: {enabled: true},
    devServer: {
        host: "0.0.0.0",
        port: 3000,
    },
    app: {
        head: {
            titleTemplate: `%s %separator %siteName`,
            templateParams: {
                siteName: 'TEST',
                separator: '|',
            },
        },
    },
    modules: [
        '@nuxtjs/i18n',
        'nuxt-lazy-load'
    ],
    css: [
        '@/assets/css/main.scss',
    ],
    i18n: {
        vueI18n: './i18n.config.ts' // if you are using custom path, default
    },
    lazyLoad: {
        images: false,
        videos: false,
        audios: false,
        iframes: false,
        native: false,
        directiveOnly: false,
        defaultImage: '/images/default.png',
        loadingClass: 'isLoading',
        loadedClass: 'isLoaded',
        appendClass: 'lazyLoad',

        observerConfig: {
            // See IntersectionObserver documentation
        }
    },
})

tailwind.config.ts

module.exports = {
    darkMode: 'class',
    safelist: [
        'bg-amethyst',
        'bg-gray-35',
        'bg-primary-10',
        'bg-secondary-10',
        'text-primary-10',
        'text-secondary-10',
        'border-primary-10',
        'border-secondary-10',
        'font-m-14',
        'font-m-20',
        'font-m-24',
        'border-secondary-10',
        'rounded-8',
        'rounded-16',
        'rounded-32',
        'rounded-full',
    ],
    theme: {
        extend: {
            colors: {
                whatsapp: {
                    10: '#E8E0D5',
                    20: '#D3FFC8',
                    30: '#00927C',
                    40: '#E7FFE0',
                    50: '#F0F0F0',
                },
                primary: {
                    10: '#E42320',
                    20: '#FF6766',
                    30: '#F69799',
                    40: '#FBD5D6',
                    50: '#FCE0E0',
                },
                accent: {
                    10: '#00BA88',
                    20: '#D6FFF4',
                },
                secondary: {
                    10: '#263575',
                    20: '#657FB0',
                    30: '#168FDF',
                    40: '#79D1EC',
                    50: '#4B69E0',
                },
                gray: {
                    100: '#000000',
                    90: '#2F2F2F',
                    80: '#4E4E4E',
                    70: '#979797',
                    60: '#b4b4b4b3',
                    50: '#D9D9D9',
                    40: '#F2F2F2',
                    30: '#F9F9F9',
                    35: '#E9E9EE',
                    20: '#FFFFFF',
                },
                'dark-pink': '#b60000',
                yellow: '#DAA43D',
                black: '#000000',
                white: '#ffffff',
                red: '#E42320',
                'dialog-red': '#b44b43',
                'light-red': '#FF6766',
                green: '#00BA88',
                'light-green': '#D6FFF4',
                pink: '#F69799',
                'light-pink': '#FBD5D6',
                'very-light-pink': '#FCE0E0',
                cyan: '#79D1EC',
                blue: '#263575',
                'light-blue': '#657FB0',
                'sky-blue': '#168FDF',
                gift: '#FFAB31',
                shimmerHighlightColor: '#ffffff',
                shimmerBaseColor: '#ebebeb',
                amethyst: 'var(--amethyst-color)',
            },
            height: {
                '48': '3rem',
                '56': '3.5rem',
            },
            borderRadius: {
                '8': '8px',
                '16': '16px',
                '38': '38px',
            },
            spacing: {
                '120p': '120px',
                '18p': '18px',
                '26p': '26px',
            }
        },
    },
};

now used tailwind classes injected in head of html page. i want split it into separate files that i can see them in chrome network tab as separete *.css files

[mnaviddoost]

@ineshbose
I noticed that if i set ssr: false in nuxt.config.ts, the css files split to separate files and everything is ok.
but i dont want set ssr to false.because my project is SEO based

[ineshbose]

The CSS should be separate files. Read related #579, #531 (comment), and nuxt/framework#8666.

I hope @/assets/css/main.scss isn't related to Tailwind because the module already handles adding the file to your project. Also unrelated, but if your config is TypeScript, use export default rather than module.exports =.

[ozgurozalp]

Same for me tailwind styles are in style tag, how can I import them with link tag

import { locales } from './lang';

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    devtools: { enabled: true },
    modules: [
        '@pinia/nuxt',
        '@nuxtjs/i18n',
        '@nuxtjs/tailwindcss',
        'floating-vue/nuxt',
        '@nuxt/content',
        '@nuxthq/studio',
    ],
    content: {
        documentDriven: true,
    },
    imports: {
        dirs: ['helpers', 'libs', 'store', 'services'],
    },
    tailwindcss: {
        viewer: false,
    },
    postcss: {
        plugins: {
            'postcss-import': {},
            'tailwindcss/nesting': {},
            tailwindcss: {},
            autoprefixer: {},
        },
    },
    runtimeConfig: {
        public: {
            API_END_POINT: process.env.API_END_POINT,
            FRONTEND_URL: process.env.FRONTEND_URL,
        },
    },
    i18n: {
        detectBrowserLanguage: false,
        skipSettingLocaleOnNavigate: true,
        defaultLocale: 'tr',
        differentDomains: true,
        locales,
        vueI18n: './i18n.config.ts',
    },
    experimental: {
        appManifest: false,
    },
    nitro: {
        prerender: {
            failOnError: false,
        },
    },
});

[meruiden]

I managed to fix it using:

export default defineNuxtConfig({
  features: {
    inlineStyles: false
  },
  ...
}