Cannot disable preflight with Tailwind 4 (Play CDN) #15967

cprcrack · 2025-01-28T13:24:11Z

cprcrack
Jan 28, 2025

With Tailwind 3 I could use the Play CDN and disable the Preflight styles like this:

<head>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = { corePlugins: { preflight: false } };
    </script>
</head>

However with Tailwind 4 there is no tailwind.config object. How can I disable the preflight styles using the Play CDN or any other method that does not involve a build step?

<head>
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
    <script>
        // How do I disable preflight styles???
    </script>
</head>

wongjn · 2025-01-28T17:43:42Z

wongjn
Jan 28, 2025
Collaborator

You can do the same thing as in the documentation:

<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);
</style>

https://jsfiddle.net/69n38pbs/

4 replies

cprcrack Jan 28, 2025
Author

Doesn't seem to work in all contexts. In the context of an Adobe Express add-on I get the error:

Refused to apply style from 'https://localhost:5241/12dfb503-d217-4784-be2a-132c30e50150/tailwindcss/theme.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Navigating to https://localhost:5241/12dfb503-d217-4784-be2a-132c30e50150/tailwindcss/theme.css results in a 404 error. How is the browser supposed to load tailwindcss/theme.css and tailwindcss/utilities.css if not using a build step and those files do not exist?

Even in your Fiddle you can see there are 404 errors for those files in the devtools > Network tab. But it seems to work. So what's going on? Trying to understand the process so that I can try to apply it in my context.

wongjn Jan 28, 2025
Collaborator

The script looks for <style> elements with type="text/tailwindcss":

tailwindcss/packages/@tailwindcss-browser/src/index.ts

Lines 72 to 74 in f237f59

    
           let stylesheets: Iterable<HTMLStyleElement> = document.querySelectorAll( 
        
             `style[type="${STYLE_TYPE}"]`, 
        
           )

Grabs the CSS inside the tag(s):

tailwindcss/packages/@tailwindcss-browser/src/index.ts

Lines 76 to 80 in f237f59

    
           let css = '' 
        
           for (let sheet of stylesheets) { 
        
             observeSheet(sheet) 
        
             css += sheet.textContent + '\n' 
        
           }

Compiles the CSS:

tailwindcss/packages/@tailwindcss-browser/src/index.ts

Lines 102 to 106 in f237f59

    
           compiler = await tailwindcss.compile(css, { 
        
             base: '/', 
        
             loadStylesheet, 
        
             loadModule, 
        
           })

The loadStylesheet is a callback that attempts to load the stylesheet content of any @imports:

tailwindcss/packages/@tailwindcss-browser/src/index.ts

Lines 115 to 155 in f237f59

    
           async function loadStylesheet(id: string, base: string) { 
        
             function load() { 
        
               if (id === 'tailwindcss') { 
        
                 return { 
        
                   base, 
        
                   content: assets.css.index, 
        
                 } 
        
               } else if ( 
        
                 id === 'tailwindcss/preflight' || 
        
                 id === 'tailwindcss/preflight.css' || 
        
                 id === './preflight.css' 
        
               ) { 
        
                 return { 
        
                   base, 
        
                   content: assets.css.preflight, 
        
                 } 
        
               } else if ( 
        
                 id === 'tailwindcss/theme' || 
        
                 id === 'tailwindcss/theme.css' || 
        
                 id === './theme.css' 
        
               ) { 
        
                 return { 
        
                   base, 
        
                   content: assets.css.theme, 
        
                 } 
        
               } else if ( 
        
                 id === 'tailwindcss/utilities' || 
        
                 id === 'tailwindcss/utilities.css' || 
        
                 id === './utilities.css' 
        
               ) { 
        
                 return { 
        
                   base, 
        
                   content: assets.css.utilities, 
        
                 } 
        
               } 
        
               throw new Error(`The browser build does not support @import for "${id}"`) 
        
             } 
        
             try { 
        
               let sheet = load()

I believe the 404s are from the browser naturally evaluating the <style> element, not from Tailwind.

jdunham2 Feb 25, 2025

How would we import the prefix or important features without importing the preflight as well?

I noticed when we use @import "tailwindcss" prefix(tw); or @import "tailwindcss" important; the preflight gets added. Is there a way to scope down those imports so this doesn't happen

jdunham2 Feb 25, 2025

Found we can import them directly from the utilities folder like they do in the tests for these

@import 'tailwindcss/utilities' important;
@import "tailwindcss/utilities" prefix(tw);
@theme reference prefix(tw);

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Cannot disable preflight with Tailwind 4 (Play CDN) #15967

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 4 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Cannot disable preflight with Tailwind 4 (Play CDN) #15967

Uh oh!

cprcrack Jan 28, 2025

Replies: 1 comment · 4 replies

Uh oh!

wongjn Jan 28, 2025 Collaborator

Uh oh!

cprcrack Jan 28, 2025 Author

Uh oh!

wongjn Jan 28, 2025 Collaborator

Uh oh!

jdunham2 Feb 25, 2025

Uh oh!

Uh oh!

jdunham2 Feb 25, 2025

cprcrack
Jan 28, 2025

Replies: 1 comment 4 replies

wongjn
Jan 28, 2025
Collaborator

cprcrack Jan 28, 2025
Author

wongjn Jan 28, 2025
Collaborator