snowpack build doesn't recognize tailwind classes in js file

237 Views Asked by At

I have a simple SPA build with snowpack and tailwindv and I have a main.js which is added in the html file as module. I uses ES6 import syntax in main.js to add Jquery and other js libs to use.

The problem -

Tailwindcss : I am using Tailwindcss along with snowpack. I can use tailwind classes inside html and they work properly but when I try to add or remove them dynamically using Jquery in the mainjs it doesn't work.

  1. When I do npm start on my snowpack project, everything seems to work as expected but after building the project using npm run build adding or removing tailwindcss classes using Jquery doesn't work.

**How do I know my build files are broken? I ran some tests - **

  1. I hosted build folder locally with live-server pkg to check if my hypothesis is right and I was certainly correct.
  2. I checked the main.js file in build folder and it seems have to all my methods.

So I think snowpack doesn't build js file properly or somehow it doesn't integrate tailwind properly.

    import $ from 'jquery'

    window.onscroll = function (e) { 
        if (window.pageYOffset > 100) { 
            $('.logo').addClass('h-16').removeClass('h-24')
        } else { 
            $('.logo').addClass('h-24').removeClass('h-16')
        }
    }

onScroll it removes the classes but doesn't add it back.

0

There are 0 best solutions below