Best way to configure a prefix when using V4 via the Play CDN

[pjhardie]

Hello,

Previously, it was well documented how to add a prefix via the CDN but with V4, it's not clear what the best approach is.

For context, the reason we'd like to do this is:

1. This is for a Shopify theme
2. We're using a prefix for all tailwind styles
3. We want to use the Play CDN to allow users to access all tailwind classes in Shopify's theme editor.
4. We need the classes applied to work when built with Vite once the theme is ready for deployment.

E.G.
{% if request.design_mode %} <script src="https://unpkg.com/@tailwindcss/browser@4"></script> {% else %} {{ 'styles.css' | asset_url | stylesheet_tag }} {% endif %}

Thanks!

[wongjn]

Use the prefix() function when @importing Tailwind:

<script src="https://unpkg.com/@tailwindcss/browser@4"></script>

<style type="text/tailwindcss">
@import "tailwindcss" prefix(tw);
</style>

JSFiddle

[outdoorsman]

I had prefix: 'tw-' in my tailwind.config.js file. Can that go away now that I have the @import "tailwindcss" prefix(tw) like you mentioned? Everything is now being prefixed tw: instead of how it used to be tw- despite the prefix: 'tw-' in tailwind.config.js.

/** @type {import('tailwindcss').Config} */
export default {
    prefix: 'tw-', // Prefix for Tailwind CSS classes
...

[pjhardie]

Thanks!