Tailwind 4 @reference '#tailwindcss' doesn't work when style is <style lang='postcss'>

Open
#998 0 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
42/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
css, nuxt, tailwind, typescript
Domain
build-system, frontend

Research direction

Start with nuxt.config.ts and reproduce the issue in a Vue component using the shown scoped lang="postcss" style block. Compare resolution of @reference '#tailwindcss' with the package.json #importtailwindcss workaround, and verify the fix in production mode; done means nested PostCSS and @apply work without the workaround.

Written by the indexing model from the issue text.

Description

question

Versions:
"@nuxtjs/tailwindcss": "^7.0.0-beta.0",
"nuxt": "^3.17.5"

nuxt.config.ts

{
  postcss: {
	plugins: {
		"@tailwindcss/postcss": {
			optimize: false // also I need to set optimize to false in order to work on production mode
		},
		"postcss-nested": {},
	}
 }
}

When the style is set to the following (postcss), then it throws errors or does nothing

<style lang='postcss' scoped>
@reference '#tailwindcss';

.ct-base__item{
  @apply flex;

  &--red{
    @apply text-red-500;
  }
}

</style>

The workaround I found is to set the following in package.json

  "imports": {
    "#importtailwindcss": "./app/assets/css/tailwind.css"
  }

Then in Vue file, I can use @reference '#importtailwindcss' to make it work again.

<style lang='postcss' scoped>
@reference '#importtailwindcss';

.ct-base__item{
  @apply flex;

  &--red{
    @apply text-red-500;
  }
}

</style>

Or not using PostCSS also works but I cannot use nested feature

<style lang='css' scoped>
@reference '#tailwindcss';

.ct-base__item{
  @apply flex;
}

.ct-base__item--red{
    @apply text-red-500;
 }
</style>

Anyone else having the same issue?

also to make postcss work on production see this thread

Dominant language
TypeScript
Stars
1.9k
Forks
192
No merged PRs in 30d

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from nuxt-modules/tailwindcss

All issues in nuxt-modules/tailwindcss

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.