Tailwind css carousel example not working-CodePudding

In a next.js project, I am trying to build a carousel using this example : https://tailwind-elements.com/docs/standard/components/carousel/

I have installed [email protected] do i need anything else to make CSS work.

CodePudding user response：

Yes you need to install the tailwind element package

npm install tw-elements and then require it in tailwind.config.js

take a look at the starter guide : https://tailwind-elements.com/quick-start/

or you can just include the CDN scripts and stylesheets

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tw-elements/dist/css/index.min.css" />
<script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/index.min.js"></script>

CodePudding user response：

Please, make sure this.

Before starting the project, install Node.js (LTS) and TailwindCSS.
Run the following command to install the package via NPM:

TERMINAL

 npm install tw-elements

Tailwind Elements is a plugin and should be included inside the tailwind.config.js file. It is also recommended to extend the content array with a js file that loads dynamic component classes:

TAILWIND.CONFIG.JS

module.exports = {
  content: ['./src/**/*.{html,js}', './node_modules/tw-elements/dist/js/**/*.js'],
  plugins: [
    require('tw-elements/dist/plugin')
  ]
}

Dynamic components will work after adding the js file:

INDEX.HTML

 <script src="./TW-ELEMENTS-PATH/dist/js/index.min.js"></script>

Alternatively, you can import it in the following way (bundler version):

INDEX.JS

  import 'tw-elements';