Css inline classes in template are not applied

[sjokara]

Environment

---

• Operating System: Linux
• Node Version: v14.18.2
• Nuxt Version: 3.1.1
• Nitro Version: 2.1.0
• Package Manager: yarn@1.22.19
• Builder: vite
• User Config: vite, components, modules, image, css, build, app, runtimeConfig
• Runtime Modules: @nuxtjs/tailwindcss@6.3.0, @nuxt/image-edge@1.0.0-27913696.5d122a3, @nuxtjs/robots@3.0.0

• Build Modules: -

Reproduction

The application runs okay locally and CSS is fine. After I run yarn build and the app is bundled for production, inline css in the template is not applied.

nuxt.config.js

/* eslint-disable @typescript-eslint/ban-ts-comment */
import eslintPlugin from 'vite-plugin-eslint'
import { config } from './config'

const appEnv = process.env.ENV || 'development'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default {
  vite: {
    // @ts-ignore,
    plugins: [eslintPlugin()]
  },
  components: {
    global: true,
    dirs: ['~/components/atoms', '~/components/molecules', '~/components/organisms', '~/components/storyblok']
  },
  modules: ['@nuxtjs/tailwindcss', '@nuxt/image-edge', '@nuxtjs/robots'],
  image: {
    provider: 'storyblok',
    storyblok: { baseURL: 'https://a.storyblok.com' },
    screens: {
      xs: 375,
      sm: 576,
      md: 768,
      lg: 992,
      xl: 1201,
      xxl: 1401,
      hd: 1920
    }
  },
  css: ['~/assets/css/main.scss', '~/assets/fonts/redHatText.css', '~/assets/fonts/redHatDisplay.css'],
  build: {
    loaders: {
      scss: {
        implementation: require('sass')
      },
      postcss: {
        plugins: {
          tailwindcss: {},
          autoprefixer: {}
        }
      }
    }
  },
  app: {
    head: {
      title: 'BeeIT',
      meta: [{ name: 'viewport', content: 'width=device-width, initial-scale=1' }],
      link: [{ rel: 'shortcut icon', type: 'image/png', href: 'https://a.storyblok.com/f/155755/32x32/d6965832e1/favicon-32x32.png' }],
      htmlAttrs: {
        lang: 'en'
      }
    }
  },
  runtimeConfig: {
    server: config[appEnv].server,
    public: config[appEnv].client
  }
}

vite.config.js

import { defineConfig } from 'vite'

export default defineConfig({
  appType: 'custom',
  server: { middlewareMode: 'ssr' },
  build: {
    ssr: true,
    manifest: true,
    copyPublicDir: true,
    cssCodeSplit: true,
    sourcemap: true,
    minify: false
  }
})

nitro.config.js

import { defineNitroConfig } from 'nitropack'

export default defineNitroConfig({
  preset: 'aws-lambda',
  serveStatic: true
})

tailwind.config.js - content part

content: ['./components/**/*.{js,vue,ts}', './layouts/**/*.vue', './pages/**/*.vue', './plugins/**/*.{js,ts}'],

Describe the bug

The application runs okay locally and CSS is fine. After I run yarn build and the app is bundled for production, inline css in the template is not applied. CSS that is in .scss files and in