Classes in markdown file are overwritten

[StefanoTesla]

I have last version of nuxt, nuxt/content and node.js

What is expected??

By default I have h1,h2,h3... with taliwind text-center and I put some table in the markdown tables as this:

<div class=" text-center">
  <p class="text-red-500 text-4xl">Arduino Mega</p>
  <ul>
    <li class="py-10 text-yellow-500 text-3xl">5€</li>
    <li class="pt-4">16KHz</li>
    <li class="py-4">8K Memoria</li>
    <li class="py-4">256K Flash</li>
    <li class="py-4">4K EEPROM</li>
    <li class="py-4">3x16bit Timer</li>
    <li class="py-4">13KHz Step Rate</li> 
  </ul>
</div>

And after generate the site to static I will see what I see in development

What append?

After generate all pages of nuxt content don't have the style I wanted. Olso table are not as expected.

tailwind.config.js:

const colors = require('tailwindcss/colors')

module.exports = {
  purge: {
    content: [
      './content/**/*.md'
    ],
    options: {
      safelist: ['m_ard', 'top_ard', 'title_ard', 'b_nav_ard', 'card_ard','code_area_ard', 'comment_ard']
    },
  },
    prefix: '',
    important: false,
    separator: ':',
    theme: {
        colors: {
            gray: colors.trueGray,
            red: colors.red,
            yellow: colors.yellow,
            green: colors.green,
            blue: colors.sky,
            orange :colors.orange
          },

    },
    variants: 
    {},
    plugins: [
    ],
  }

[StefanoTesla]

a lot of tries and fuond something very very strange.

I didn't had tailiwind typography...my bad? I didn't see any reason why I should had it....

anyway

Noting, afetr one month of work, was as I expected after generate.

I've create a component, put the same table. imported the component to the markdown and it sound like a magic: the style was ok

except the H1 H2 ecc.. style (centering cause size is ok)

I've remove the component, and it continue to work.... 💯

So...it's a bug? it's the last version of nuxt?

[NozomuIkuta]

@StefanoTesla

It's appreciated if you follow the forms in the Issue Template, and provide the specific versions of packages and reproduction link. Otherwise, people can't be on the same page with you and can't tell something on the correct assumption.

[StefanoTesla]

Version

@nuxt/content: v1.41.0 nuxt: v2.15.3

Fresh and new nuxt/nuxt content installation

Reproduction Link

https://github.com/StefanoTesla/cssproblem

Steps to reproduce

In development pages are ok, html with classes are reproduced without problems

What is Expected?

Development and static site look similar

What is actually happening?

Afert generate static site the pages coming from markup file containing html are borken

[StefanoTesla]

And now some ""magic""

If you take the repo, you test it, and you have the problem, check this:

• Copy the not working div from markdown
• Create a .vue file in pages folder and paste inside the copied code
• npm run generate and then npm run start, the problem will disappear is content problem or some purgecss hidden configuration??

Why???????

• [ ]

[NozomuIkuta]

@StefanoTesla

Thank you for providing the reproduction. I checked your repo, and found the root cause and solution.

TLDR

You can fix the issue by setting purge.content option in tailwind.config.js for PurgeCSS to analyze markdown files in content directory.

const path = require('path')

module.exports = {
  purge: {
    content: [
      path.join(__dirname, './content/**/*.md')
    ]
  }
}

Details

The reason why styles in the page are broken in generated pages (i.e. in production) is because the CSS classes used in markdown files are purged on build time by PurgeCSS, as you guessed.

You have to set the purge.content option in tailwind.config.js for PurgeCSS to analyze markdown files.

With @nuxtjs/tailwindcss, only *.(vue|js|ts) files in Nuxt default directories (e.g. pages, components) are specified by default (link).

This is why styles are shown as expected when you define the table as a Vue component.

By the way, it's natural that content directory is not specified by default, because Nuxt Content module and Nuxt TailwindCSS module are independent from each other.

[StefanoTesla]

@StefanoTesla

Thank you for providing the reproduction. I checked your repo, and found the root cause and solution.

TLDR

You can fix the issue by setting purge.content option in tailwind.config.js for PurgeCSS to analyze markdown files in content directory.

const path = require('path')

module.exports = {
  purge: {
    content: [
      path.join(__dirname, './content/**/*.md')
    ]
  }
}

Details

The reason why styles in the page are broken in generated pages (i.e. in production) is because the CSS classes used in markdown files are purged on build time by PurgeCSS, as you guessed.

You have to set the purge.content option in tailwind.config.js for PurgeCSS to analyze markdown files.

With @nuxtjs/tailwindcss, only *.(vue|js|ts) files in Nuxt default directories (e.g. pages, components) are specified by default (link).

This is why styles are shown as expected when you define the table as a Vue component.

By the way, it's natural that content directory is not specified by default, because Nuxt Content module and Nuxt TailwindCSS module are independent from each other.

I already did this in my project, but not in the demo repo

[NozomuIkuta]

@StefanoTesla

Do you mean the issue is not fixed in your project?

Then, there might be some conditions specific to your project.

Without any more information or reproduction, I can't say anything that may helpful to you.