Adding @layerstack/tailwind/plugin breaks tailwindcss language server

[jostrzol]

Description

Adding @layerstack/tailwind/plugin, as instructed on https://svelte-ux.techniq.dev/, breaks tailwindcss language server.

Steps to reproduce

1. npx sv create demo (add tailwindcss in the creator)
2. npm install svelte-ux
3. Create tailwind.config.cjs (it is not created automatically in tailwind v4):

const colors = require('tailwindcss/colors');
const layerstack = require('@layerstack/tailwind/plugin');

module.exports = {
  content: [
    './src/**/*.{html,svelte}', 
    './node_modules/svelte-ux/**/*.{svelte,js}'
  ],

  // See customization docs: https://svelte-ux.techniq.dev/customization
  ux: {
    themes: {
      light: {
        primary: colors['orange']['500'],
        'primary-content': 'white',
        secondary: colors['blue']['500'],
        'surface-100': 'white',
        'surface-200': colors['gray']['100'],
        'surface-300': colors['gray']['300'],
        'surface-content': colors['gray']['900'],
        'color-scheme': 'light'
      },
      dark: {
        primary: colors['orange']['500'],
        'primary-content': 'white',
        secondary: colors['blue']['500'],
        'surface-100': colors['zinc']['800'],
        'surface-200': colors['zinc']['900'],
        'surface-300': colors['zinc']['950'],
        'surface-content': colors['zinc']['100'],
        'color-scheme': 'dark'
      },
    },
  },

  plugins: [
    layerstack,  // uses hsl() color space by default. To use oklch(), use: layerstack({ colorSpace: 'oklch' }),
  ]
};

4. Modify ./src/app.cs (needed since tailwind v4):

   @import 'tailwindcss';
   
   @config '../tailwind.config.cjs';

5. Now tailwind language server (@tailwindcss/language-server) stops working (stops giving autocompletions or documantation, but doesn't crash).

Dependencies

	"devDependencies": {
		"@sveltejs/adapter-auto": "^4.0.0",
		"@sveltejs/kit": "^2.16.0",
		"@sveltejs/vite-plugin-svelte": "^5.0.0",
		"@tailwindcss/vite": "^4.0.0",
		"svelte": "^5.0.0",
		"svelte-check": "^4.0.0",
		"tailwindcss": "^4.0.0",
		"typescript": "^5.0.0",
		"vite": "^6.0.0"
	},
	"dependencies": {
		"svelte-ux": "^0.90.2"
	}

@tailwindcss/language-server version: 0.14.4

Other information

• Same is observed, when instead of @config directive, we simply use @plugin '@layerstack/tailwind/plugin'; directive.
• Upon removing either @config or @plugin directive, the LSP goes back to working normally.
• Using other tailwind plugin doesn't have the same effect, e.g. @plugin '@tailwindcss/typography';.

[techniq]

Thanks @jostrzol. I haven't looked at Tailwind 4 just yet for layerstack/Svelte UX but plan to as part of the Svelte 5 migration. I'm assuming there are some plugin breaking changes that need to be addressed, although I'm curious if you've seen any issues with Tailwind 3. My language servers (be it Svelte, Typescript, or Tailwind) are always flaky and restart them multiple times a day, but there could be a root cause here as well.

If you're able to identify what needs to be changed before I get time, I'll make time to review the PR.

For Svelte UX, LayerChart, and LayerStack, I hope to create release 1.0 releases for each, which will maintain backwards compatibility with Svelte 3-5 and Tailwind 3, and then start next branches for each which will migrate to Svelte 5 and Tailwind 4.

[jostrzol]

Thanks! I'll try to help you if I find some time, but can't promise anything.

I have tried multiple times restarting the LSP, editor, etc, so I am quite sure the issue is real. It occurs both on my LunarVim setup as well as VS Code with the tailwind extension, so it is unlikely that I misconfigured something (VS Code setup should be quite idiot-proof).

I will check if it is present on tailwind v3.

[techniq]

@layerstack/tailwind@next (2.0.0) is now based on Tailwind 4 and no longer has a plugin (considered legacy) but is instead css-only (albeit with some extra directives). This is available using core.css, utils.css, and an optional theme file (such as basic.css)

Using these files in your app.css (or similar):

@import 'tailwindcss';

@import '@layerstack/tailwind/core.css';
@import '@layerstack/tailwind/utils.css';
@import '@layerstack/tailwind/themes/basic.css';

@source '../../node_modules/svelte-ux/dist';
@source '../../node_modules/layerchart/dist';

:root {
  --color-primary: var(--color-emerald-600);
  --color-secondary: var(--color-blue-500);
}