TW-elements is broken since upgrade to Tailwind 3

117 Views Asked by At

Since I changed the version from Tw to 3.3.3, tw-elements no longer works.

I'm on a rails application and this is what I've done.

In my application.js

import "@hotwired/turbo-rails"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import 'tw-elements';

// Rails.start();
// Turbolinks.start()
ActiveStorage.start();

require("../css/application.scss");
require("@rails/actiontext");

tailwind.config.js

module.exports = withAnimations({
    mode: 'jit',
    /*content: ['./app/!**!/!*.{html,js}', '/node_modules/tw-elements/dist/js/!**!/!*.js'],*/
    content: [
        './app/**/*.{html,js}',
        "./app/**/*.html.erb",
        "./app/components/**/*.html.erb",
        "./app/helpers/**/*.rb",
        "./app/javascript/**/*.js",
        '/node_modules/tw-elements/dist/js/!**!/!*.js\''
    ],
    ........
    
        plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
        require('@tailwindcss/aspect-ratio'),
        require('tw-elements/dist/plugin'),
    ],
})

I noticed a change in the html code from data-bs-... to data-te-...

But even with the html example it doesn't work and I don't get any error messages.

The carousel is not displayed, and I have nothing.

I have node 14.21.3, tailwind 3.3.3, tw-elements: 1.0.0-alpha10

0

There are 0 best solutions below