Tailwind Elements

Tailwind Elements is a plugin that extends the functionality of the library with many interactive components.

In some dynamic components (like dropdowns or modals) we add Font Awesome icons and custom JavaScript. However, they do not require any additional installation, all the necessary code is always included in the example and copied to any Tailwind project - it will work.

Bootstrap components recreated with Tailwind CSS, but with better design and more functionalities.

500+ UI components
Super simple, 1 minute installation
Free hosting
MIT license - free for personal & commercial use


Components	Design blocks (sections)	Templates (coming soon)

Free hosting	Playground	Drag & drop builder (coming soon)

Components

Collection of free, popular components like modal, dropdown, carousel, popover, cards, charts and many more.


Datepicker	Dropdown	Modal

Charts	Tooltips	Carousel

Accordion	Tabs	Stepper

Accordion	Tabs	Stepper

Design blocks

Responsive Landing page blocks built with Tailwind CSS. Plenty of design blocks examples such as Teams, services, projects, faq, and many more.


Hero	Pricing	Call to action

Features	Contact	News/blog

Team	Stats	Testimonials

Contact	Newsletter	Projects

Quick Start tutorial

NPM

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

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:

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:

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

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

import 'tw-elements';

MDB GO / CLI

Create, deploy and host anything with a single command.

To start using MDB GO / CLI install it with one command:

npm install -g mdb-cli

Log into the CLI using your MDB account:

mdb login

Initialize a project and choose Tailwind Elements from the list:

mdb init

Install the dependencies (inside the project directory):

npm install

Run the app:

npm start

Publish when you're ready:

mdb publish

CDN

You can easily test Tailwind Elements by adding CDN scripts to your classic HTML template without the need for installing any packages.

Add the stylesheet files below in the head section:

<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.tailwindcss.com"></script>
<script>
  tailwind.config = {
    theme: {
      extend: {
        fontFamily: {
          sans: ['Inter', 'sans-serif'],
        },
      }
    }
  }
</script>

Require the js bundled file right before the body closing tag:

<script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/index.min.js"></script>

klon22/Tailwind-Elements

Tailwind Elements

Components

Design blocks

Quick Start tutorial

NPM

MDB GO / CLI

CDN