Tailwind + Javascript

Question

Does tailwind compatible with javascript codes because every time when I use it doesn't work.

Example code:

<div class="slides"
     data-0="transform translate-x-0 translate-y-0"
     data-100p="transform translate-x-0 translate-y-1/2"
     data-200p="transform translate-x-1/2 translate-y-1/2"
     data-300ps="transform translate-x-1/2
> 
...
</div>

skrollr.js

 <script src="/home/isswarya/skrollr.min.js"></script>
 <script type="text/javascript">var s = skrollr.init();
 </script>

Answer 1

Yes Tailwind CSS is compatible with javascript code. By default, Tailwind will look for an optional tailwind.config.js file at the root of your project where you can define any customizations.

// Example `tailwind.config.js` file

module.exports = {
  important: true,
  theme: {
    fontFamily: {
      display: ['Gilroy', 'sans-serif'],
      body: ['Graphik', 'sans-serif'],
    },
    extend: {
      colors: {
        cyan: '#9cdbff',
      },
      margin: {
        '96': '24rem',
        '128': '32rem',
      },
    }
  },
  variants: {
    opacity: ['responsive', 'hover']
  }
}

You can see Tailwind CSS Configuration