Purge doesn't keep tailwind classes used in HTML

[noook]

Describe the problem:

EDIT: The output is a library, not an app (entrypoint is not the same)

The classes I added in the HTML are not conserved when building and purging style.

There is no CSS output

<template>
  <div class="text-3xl text-red-100">
    <h1>Hello</h1>
  </div>
</template>

module.exports = {
  purge: {
    content: [
      './src/**/*.vue',
      './src/**/*.html',
      './src/**/*.js',
    ],
  },
};

Link to a minimal reproduction:

Github repository

yarn build to see that there is no CSS included in the build

[sa3dany]

Are you sure postcss runs? I've checked the build script in package.json and the only thing it does is execute vue-cli-service build.

[noook]

Isn't PostCSS part of the build process ? If I change the purge config or put wrong configuration I have warnings during the biuld process so I guess the purge step is executed.

[sa3dany]

I am not really familiar with vue-cli so that's why I asked. Does running postcss directly also not produce an output?
postcss src/assets/main.scss --output dist/styles.css

[noook]

It runs correctly, it outputs a file of 106 347 lines, I guess nothing's purged in it.

[sa3dany]

You need to set the NODE_ENV to production for the purging to happen NODE_ENV=production postcss src/assets/main.scss --output dist/styles.css.

[noook]

Oh right, indeed it works way better. And my classes are now appended to the output, which is nice ! What's the trick then ?

I checked vue-cli documentation under the "Working with postcss" section, so my config file should be read when building.

Any idea what's happening ? That's the first time I work with a post-processor I don't think I have enough knowledge about those things yet

[sa3dany]

Adding import './assets/main.scss'; in src/App.vue within the <script> tags seems to produce the correct output.
I suggest closing this issue though since we have established that this is not a tailwind issue.

[Destreyf]

@noook @sa3dany

I am using tailwind with vue in one of my projects, I imported the base style into my main.ts file and it worked as well.

[noook]

yeah it transforms every @apply rule into compiled CSS, but it doesn't keep the classes I'm using on my markup.

[simonswiss]

The default strategy to decide wether or not to run purge in Tailwind, like @sa3dany mentioned above, is based on the NODE_ENV === "production" check.

I see you have now added this in your package.json script, which should make it work properly.

If you want to handle that differently, you can take control of when to purge by adding an enabled property to your purge object in the Tailwind config file, where you can decide of the logic:

module.exports = {
  purge: {
    content: [
      './src/**/*.vue',
      './src/**/*.html',
      './src/**/*.js',
    ],
+.  enabled: true // this would *always* run purge
  },
};

Hope this helps! 👍

[noook]

That's a good point, I'll rather do this indeed.

[noook]

Alright alright, I figured it out. The build command doesn't seem to take main.ts as the entry point when outputting as a library, App.vue is. I moved the import instruction into the directory I'm building the library from and it works like a charm. Fixed in this commit

Special thanks to @sa3dany for leading me on the good path

I'll update my original post to mention that the output is a library and not an app, and that the entry point is not the one we all think about.