auto add prefix not working.

[chechuangfeng]

What version of Tailwind CSS are you using?

v3.0

What build tool (or framework if it abstracts the build tool) are you using?

What version of Node.js are you using?

v18.12.1

What browser are you using?

What operating system are you using?

macOS

Describe your issue
tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    prefix: "xx-",
    content: [],
    theme: {  
        extend: {},
    },
    plugins: [],
    purge: {
        enabled: false,
        content: ["./**/*.liquid"],
    },
    
}

I run the command to gen css file : npx tailwindcss build css/application.css -o assets/application.css.liquid
But. the result file seem lost all css style.
I look like below

when I disable the "prefix" config, everything going well.

I think the build system made an error in processing the prefix, but it ended up showing a successful build.

[adamwathan]

If you have configured the prefix xx-, then you need to make sure the classes in your HTML have that prefix, or they won't be detected and nothing will be generated.

Have you updated your HTML to use xx-container instead of container?

[chechuangfeng]

If you have configured the prefix xx-, then you need to make sure the classes in your HTML have that prefix, or they won't be detected and nothing will be generated.

Have you updated your HTML to use xx-container instead of container?

I can not find the "xx-container" class in assets/application.css.liquid.

"assets/application.css.liquid." I think this file is incomplete. Some of the classes are not generated successfully

[adamwathan]

Can you share your liquid templates? The string xx-container needs to exist in your templates somewhere.

[chechuangfeng]

application.css.liquid.zip

css.zip

tailwind.config.js.zip

command: npx tailwindcss build css/application.css -o assets/application.css.liquid

[chechuangfeng]

@adamwathan

[RobinMalfait]

Prefixes are not auto added. If you use the class container, and configure a prefix of xx- then you have to use xx-container in your templates instead of container.

Tailwind will not change your source files and automagically convert container to xx-container.

That also explains why your generated css file is fairly empty, because if you configure a prefix tailwind is now looking for xx-container but if you haven't used that one yet, it won't be generated at all.

[chechuangfeng]

class container is tailwindcss's own built-in class.

How do I manually prefix the class "container" to "xx-container"?

[chechuangfeng]

Since some of the class names provided by tailwindcss are the same as the class names in my existing project. For example ".card" ".container".

I don't want them to be overwritten with each other and affect the effect. So I want the class names in the css files generated by tailwindcss to have a prefix.

So I use the configuration parameter "prefix". Is it possible that this parameter is not meant to be what I think it is?

[adamwathan]

So to explain again, the prefix option lets you configure a prefix you want added to the beginning of every Tailwind class to avoid conflicts, which sounds like what you want.

But if you enable it, you need to make sure you actually use that prefix in your HTML files.

For example, given this config:

/** @type {import('tailwindcss').Config} */
module.exports = {
    prefix: "xx-",
    // ...
}

...you need to include the xx- prefix any time you use a Tailwind class in your markup:

<div class="xx-container xx-font-bold xx-bg-red-500 ...">

If you write this HTML, the styles will not be generated or applied, because once you configure a prefix, these classes don't exist:

<div class="container font-bold bg-red-500 ...">

Once you configure a prefix of xx-, container isn't a valid class anymore, only xx-container is a valid class. So you need to use xx-container in your HTML, not container.

[chechuangfeng]

It's working properly! Thank you.

I didn't fully understand the mechanics of how things work here.
I thought the build command would generate the full amount of css styles for me.
Now I understand that the build tool only generates the useful classes for me, so that my css files don't have to be bloated. This is a very good design.

[nabeel-shakeel]

@chechuangfeng: You can also use this tool to convert your classes into prefixed ones.
https://tailwind-prefix-tool.netlify.app/

[rajeshwarpatlolla]

I used this link to generate the HTML changes required after adding prefix.

https://github.vue.tailwind-prefix.cbass.dev/

[SySagar]

Hey I found out that the prefix is not auto added and we have to add it manually. Is there a way to auto add the prfix somehow?