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.
- 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 - **
- I hosted build folder locally with live-server pkg to check if my hypothesis is right and I was certainly correct.
- 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.