Tailwindcss 3 loading after 500ms-1sec

[binods-gintaa]

Environment

• Operating System: Darwin
• Node Version: v16.13.1
• Nuxt Version: 2.16.0-27358576.777a4b7f
• Package Manager: [email protected]
• Bundler: Webpack
• User Config: head, css, plugins, components, buildModules, modules, axios, pwa, build, env, firebase, analytics, remoteConfig, tailwindcss, alias, bridge
• Runtime Modules: @nuxtjs/[email protected], @nuxtjs/[email protected]
• Build Modules: @nuxt/[email protected], @nuxt/[email protected]

Reproduction

Configure tailwind css 3 with nuxt bridge project
https://tailwindcss.com/docs/guides/nuxtjs

Then simply run yarn dev

Describe the bug

Tailwind css 3 with nuxt bridge
Loading after 1 second
It is occurring for build as well as dev time

Additional context

`
// nuxt.config.js

import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
// bridge: false,

// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: 'gintaa-web-app-nuxt',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},

// Global CSS: https://go.nuxtjs.dev/config-css
css: [
'@/assets/css/main.css',
],

// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
],

// Auto import components: https://go.nuxtjs.dev/config-components
components: true,

// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/tailwindcss
// '@nuxtjs/tailwindcss'
'@nuxt/postcss8'
],

// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/axios
'@nuxtjs/axios',
// https://go.nuxtjs.dev/pwa
// '@nuxtjs/pwa',
'@nuxtjs/firebase'
],

// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {
// Workaround to avoid enforcing hard-coded localhost:3000: nuxt-community/axios-module#308
baseURL: 'https://dev.api.gintaa.com/'
},

// PWA module configuration: https://go.nuxtjs.dev/pwa
pwa: {
manifest: {
lang: 'en'
}
},

// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
},

env: {
FIRE_ENV: process.env.NODE_ENV
},
firebase: {
config: {
development: {
apiKey: '',
authDomain: '',
databaseURL: '',
projectId: '',
storageBucket: '',
messagingSenderId: '',
appId: '',
measurementId: '',
},
alpha: {
apiKey: '',
authDomain: '',
databaseURL: '',
projectId: '',
storageBucket: '',
messagingSenderId: '',
appId: '',
measurementId: '',
}
},
services: {
auth: true,
firestore: true,
functions: true,
storage: true,
database: true,
messaging: true,
performance: true,
analytics: true,
remoteConfig: true
}
},
analytics: {
collectionEnabled: true // default
},
remoteConfig: {
settings: {
fetchTimeoutMillis: 60000, // default
minimumFetchIntervalMillis: 43200000 // default
},
defaultConfig: {
// 'welcome_message': 'Welcome'
}
},

tailwindcss: {
viewer: false
},
alias: {
tslib: 'tslib/tslib.es6.js'
}
})

`

Logs

No response

[danielroe]

Would you provide a reproduction? 🙏

Is this different behaviour compared to enabling bridge vs not enabling bridge? Do you mean the styles aren't visible for .5-1s? Or the page doesn't load?

[binods-gintaa]

Hi @danielroe , Thanks for quick reply

1. Create nuxt 2 project
2. Add tailwind css https://tailwindcss.com/docs/guides/nuxtjs
3. Enable nuxt bridge as per https://v3.nuxtjs.org/getting-started/bridge/

After 1 & 2 it will work file but after point 3 facing the issue

Style is not visible

[danielroe]

I belive this is a duplicate of #26. Let's follow there.