Tailwind 4 support

[sami616]

Are there plans to add Tailwind 4 support? I notice there is a new @plugin directive which allows you to select your plugin - whats not clear from the docs is how you can pass arguments.

[Roman86]

hi @sami616 ! Yes, the docs are quite short about that directive. Maybe something like this could work. Try exporting the configured plugin instance as default export, and feed it to that directive. Have no time yet to try by myself, sorry.

[sami616]

thanks for the suggestion!

index.css

@plugin './scopedPreflight.js';

scopedPreflight.js

import { scopedPreflightStyles, isolateOutsideOfContainer } from 'tailwindcss-scoped-preflight'

const scopedPreflight = scopedPreflightStyles({
  isolationStrategy: isolateOutsideOfContainer('#canvas'),
})

export default scopedPreflight

Unfortunately i get the following error in vite

[plugin:@tailwindcss/vite:generate:serve] require is not defined

Will keep digging!

[paradox8599]

I got the same problem importing the plugin in tailwind v4:

[Roman86]

hi guys! Maybe try this option for your vite config:

  build: {
    commonjsOptions: { 
      transformMixedEsModules: true
    }
  }

as suggested here

[Roman86]

maybe I should replace this call with something non-require and reliable (afaik there's no good replacement exists yet):

const baseCssPath = require.resolve('tailwindcss/lib/css/preflight.css');

Or maybe we are ok to drop the commonjs bundle completely (by using import.meta.resolve which can't work there)

[Roman86]

I replaced that call with createRequire(import.meta.url).resolve.
v3.4.10...v3.5.0
Please try if it helps: manually upgrade to version 3.5.0 or beta tag

[sami616]

Thanks so much for looking into this @Roman86! I think it's almost there, now seeing this:

[plugin:@tailwindcss/vite:generate:serve] Package subpath './lib/css/preflight.css' is not defined by "exports" in /Users/samiresua/apps/indexdb/node_modules/.pnpm/tailwindcss-scoped-preflight@3.5.0_postcss@8.4.49_tailwindcss@4.0.0/node_modules/tailwindcss/package.json

[Roman86]

maybe I should try suggesting all the possible paths to that preflight css file. Instead of using require resolve and its alternatives. All I need is to find that file. If the issue is really about resolving it

[sami616]

I actually just discovered a really neat css only solution for the isolateOutsideOfContainer strategy.

In my case because i defined my non-tailwind stuff in a previous cascade layer, I can do the following:

#no-tw {
      *,
      ::after,
      ::before,
      ::backdrop,
      ::file-selector-button {
        all: revert-layer;
      }
}

This will skip looking at preflight for everything inside of my #no-tw container and use selectors from a previously defined layer. 🔥

[paradox8599]

It seems v4 has changed a lot.

I have tried replacing the correct path for preflight.css in v4, but it then says corePlugins is not a function.

It looks like official plugins are using different methods? (require('tailwindcss/plugin'))
see https://github.com/tailwindlabs/tailwindcss-typography/blob/main/src/index.js

But I don't know about how tailwind plugins work yet.

[rjvim]

@sami616 I tried using nested classes

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme) prefix(eln);
@import "tailwindcss/utilities.css" layer(utilities);

.twp {
  @import "tailwindcss/preflight.css" layer(base);
}

This works when I build the code as it produces something like follows:

@layer base {
  .twp *,
  .twp :after,
  .twp :before,
  .twp ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }
}

The above would limit preflight classes to work only where there is .twp

But in dev mode, the above thing becomes:

.twp 
@layer base {
  *,
  :after,
  :before,
  ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }
}

The above doesn't work as vite is changing something only for dev, any idea?

[rjvim]

There is one setup works for me: https://play.tailwindcss.com/QxIrxRJKpT

But I have to nest using a div as a wrapper for it to work.

[sami616]

@rjvim great, i did notice that you need to add more selectors to cover everything that preflight selects.

so:

      *,
      ::after,
      ::before,
      ::backdrop,
      ::file-selector-button {
        all: revert-layer;
      }

I have updated my previous example to reflect this too.