How to output specific classnames

[boskakke]

Hi Maizzle community :-)

I'm doing some edits on some markup that a previous developer did. And I wanted to run my code through Maizzle (what a fantastic tool)

The preveious guy didn't use Maizzle - and used a classname called "container" in his markup.

But when I build my templates, the .container class gets converted to tailwind styles - and the class="container" is no more to be found in the final HTML.

Because I don't want to change the overall template in the project, I need my html to render this:

<table class="container">

I've tried the following:

<table class="container">
<table class="{container}">
<table class="{{container}}">
<table class="{{{container}}}">
<table class="@{{container}}">
<table class="@{{{container}}}">

Is it possible?

ps. i also reported this as a bug. Sorry for that. It is just a question. :-)

[cossssmin]

Hi there, you can do it with a couple changes to config files.

1. .container is a class generated by Tailwind CSS, so you need to first disable it in tailwind.config.js:

   module.exports = {
     // ...
     corePlugins: {
       // ...
       container: false,
     },
   }

2. Next, you need to whitelist the .container class in removeUnusedCSS in your config.production.js, so that it isn't purged when you build for production:

   module.exports = {
     // ...
     removeUnusedCSS: {
       whitelist: ['.container'],
     },
   }

Now you can simply write <table class="container"> and it will be preserved in the compiled HTML.

Works in both v4.3.1 and the latest beta of Maizzle.

[boskakke]

Hi Cosmin,
Thank you for your help. It worked! I did actually the "removeUnusedCSS" setting myself - but not in combination with the tailwind config.
Thanks again 🙏
Thank you for your awesome work on Maizzle

[cossssmin]

You're welcome, happy to help! :)