Different results with build and dev server in nuxt js

[geongeorge]

I have a piece of code. When using with build and dev server I get a different result. I'm using nuxt js.

<div class="fixed bg-gray-200 h-screen w-full lg:w-1/5">
     <div class="text-center mt-5 pt-2">
          <p>yada yada yada</p>
     </div>
     <div class='mt-5 px-2'>
          <SideBarSearch></SideBarSearch>
     </div>
</div>

In the build server, the lg:w-1/5 doesn't seem to have any effect. I cant also find this width property in the styles tab of dev tools.

It is as if it had never been defined.

Difference between dev server and after build.

In dev server, you can clearly see the media query for w-1/5 Style tab in dev server

After the build, there is no media query for the element (It seems as if the style lg:w-1/5 is not defined) Style tab after build

[geongeorge]

This is tailwind.config.js doesn't seem to help either

variants: {
   width: ['responsive'],
  }

[hacknug]

If you’re using purgecss it’s probably due to your regex not working properly. Take a look at this page from the docs: https://tailwindcss.com/docs/controlling-file-size/

[geongeorge]

@hacknug I guess this is the problem but how do I solve it? I'm not generating any css via templating.

[adamwathan]

Can you share your PostCSS/Purgecss config?

[geongeorge]

@adamwathan I do not have any purgecss config. if there is any, it should be whatever that comes default with nuxt-js. I'm on v2.0.0 There is no separate config file and no config in nuxt.config.js

I also tried adding this to nuxt config according to this guide:

// nuxt.config.js
{
  purgeCSS: {
    whitelist: ['lg:w-1/5', 'lg:w-4/5'],
  },
}

Doesn't seem to have any effect

[adamwathan]

Can you create a project on GitHub that reproduces the issue so we can actually pull it down and see all the files and installed packages and research how to properly configure it for you?

[hacknug]

I think is just a matter of using a different extractor regex. The default one doesn’t support escaped characters in classes: https://github.com/Developmint/nuxt-purgecss/blob/master/README.md#defaults

[geongeorge]

@adamwathan I was aiming for something like this: https://github.com/geongeorge/tailwind-test It seems to work in this example. @hacknug I guess that could be or I'm doing something really stupid.

I have given both of you access to the repo: https://github.com/geongeorge/i-hate-regex/invitations The problem is here at layout-g/base/post.vue this component is used in layout-g/expr.vue and this is used as the default layout for pages/expr/_id.vue I can confirm that yarn build > yarn start will produce a different result with yarn dev (resize and try to open the sidebar menu with the button) (btw it's just a hobby project. not a huge deal if anybody accessed it) I know I'm asking too much. We can stop here and I will come and reply if I find a solution :D

[hacknug]

Just checked and it looks like the issue might come from purgecss not looking for classes inside the layout-g directory (and maybe others too). Do you know if that's a nuxt convention or you made it up to better organize your components? If not a convention, you need to update your config to make sure purgecss scans files in all of your directories.

[geongeorge]

layout-g is something I've added. Thank you. Let me see if I can somehow add it to purgecss config

[geongeorge]

Thanks @hacknug ! You were right. I was able to solve this by moving my custom layouts folder into the nuxt default components folder. Although I was not successful in trying to add the custom folder into nuxt-purgecss config.

For anyone else reading this:

Problem My problem was that css classes from tailwind seemed to be "not defined" when adding those classes in the components in my custom component folder in nuxt js In dev server everything was alright but after build, these classes were not included.

Reason The reason was purgecss removing the unused classes which were not in the predefined folders.

Solution There are 2 possible solutions:

1. Move all custom folders into the default components folder (this was what I did)
2. Add your custom folder to nuxt-purgecss so that it notices this folder and considers this too (I could not find the right way to do this. After several tries, I went with the first solution)

[hacknug]

You should use the content option in purgecss' config object to tell it where to look for classes: https://www.purgecss.com/configuration