Install a free Tailwind CSS components library

Install Tailwind Elements via npm, via command line, via CDN or download a free .zip package. Use our open source Tailwind CSS components for free.

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 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.

NPM

NPM is a recommended way to work with Tailwind Elements and others libraries.

Make sure that you have Node.js installed. In order to verify that, open a command line and type node -v. If node is installed you should see it's version in a console.

1. Before starting the project make sure to install Node.js (LTS) and TailwindCSS.

2. Run the following command to install the package via NPM:

terminal

        
            
  npm install tw-elements

3. Tailwind Elements is a plugin and should be included inside tailwind.config.js. It is also recommended to extend the content array with a js files pattern 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")]
  };

4. 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 * as te from 'tw-elements';

MDB GO / CLI

Create, deploy and host anything with a single command.

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

terminal

        
            
  npm install -g mdb-cli

2. Log into the CLI using your MDB account:

terminal

        
            
  mdb login

3. Initialize a project and choose Tailwind Elements from the list:

terminal

        
            
  mdb init tailwind-elements-free

4. Install the dependencies (inside the project directory):

terminal

        
            
  npm install

5. Run the app:

terminal

        
            
  npm start

6. Publish when you're ready:

terminal

        
            
  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:

index.html

        
            
  <link
    href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap"
    rel="stylesheet" />
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/tw-elements/dist/css/index.min.css" />
  <script src="https://cdn.tailwindcss.com/3.2.4"></script>
  <script>
    tailwind.config = {
      darkMode: "class",
      theme: {
        fontFamily: {
          sans: ["Roboto", "sans-serif"],
          body: ["Roboto", "sans-serif"],
          mono: ["ui-monospace", "monospace"],
        },
      },
      corePlugins: {
        preflight: false,
      },
    };
  </script>

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

index.html

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

Starter

In order to quickly test Tailwind Elements simply download our starter. Keep in mind that this is not an optimized for production version, but only a demo for testing.

Quick Start

NPM

MDB GO / CLI

CDN

Starter