Upgrade Your Tailwind CSS Experience: Here's How to Get Started
Tags: tailwindcss, webdev, javascript, html
Published: 2023-03-26 22:00:00

Tailwind CSS is taking the web development world by storm.

It provides a powerful utility-based framework, but at the same time, **it's missing lots of very useful prebuilt components**.

It's easy to **waste lots of time** struggling with **annoying styling issues**, especially if you're working with components like:

- [Forms](https://tailwind-elements.com/docs/standard/forms/form-templates/)
- [Date](https://tailwind-elements.com/docs/standard/forms/datepicker/) & [time](https://tailwind-elements.com/docs/standard/forms/timepicker/) pickers
- [Modals](https://tailwind-elements.com/docs/standard/components/modal/)
- Complex navigation like [mega-menu](https://tailwind-elements.com/docs/standard/navigation/mega-menu/), [scrollspy](https://tailwind-elements.com/docs/standard/navigation/scrollspy/) or [sidenav](https://tailwind-elements.com/docs/standard/navigation/sidenav/)
- [Carousels](https://tailwind-elements.com/docs/standard/components/video-carousel/), [sliders](https://tailwind-elements.com/docs/standard/components/carousel/), [galleries](https://tailwind-elements.com/docs/standard/components/gallery/) & more

---

## Table of contents

{%- # TOC start -%}
- [Tailwind Elements](#tailwind-elements)
- [How to install Tailwind Elements](#how-to-install-tailwind-elements)
  * [npm](#npm)
  * [MDB GO / CLI](#mdb-go-cli)
  * [CDN](#cdn)
  * [.ZIP Starter](#zip-starter)
- [Build something!](#build-something)
  * [Search for components](#search-for-components)
  * [Dark Mode](#dark-mode)
  * [Custom Theme](#custom-theme)
  * [Design Blocks](#design-blocks)
- [Support](#support)
- [Updates](#updates)
- [Summary](#summary)
{%- # TOC end -%}

---

## Tailwind Elements

Tailwind Elements is a huge collection of open-source components, templates & plugins for Tailwind CSS.
It covers **all of the missing components** from Tailwind & more.

In some dynamic components (like dropdowns or modals) Elements adds 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.

---

## How to install Tailwind Elements

There are a **couple of ways** to install Tailwind Elements.
We will explore 4 of them - **npm, mdb-cli, CDN & .zip** package.


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

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:
`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:
```
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:
`<script src="./TW-ELEMENTS-PATH/dist/js/index.min.js"></script>`

Alternatively, you can import it in the following way (bundler version):
`import * as te from 'tw-elements';`

### MDB GO / CLI
MDB CLI is a command line tool that allows you to create, deploy and host anything with a single command.

1. To start using MDB GO / CLI install it with one command:
`npm install -g mdb-cli`


2. Log into the CLI using your MDB account:
`mdb login`


3. Initialize a project and choose Tailwind Elements from the list:
`mdb init tailwind-elements-free`


4. Install the dependencies (inside the project directory):
`npm install`


5. Run the app:
`npm start`


6. Publish when you're ready & deploy to the web for free
`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
  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:
`<script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/index.min.js"></script>`


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

You can download the .zip [here](https://tailwind-elements.com/te-starter.zip).

---

## Build something!

You have successfully installed the package. Now it's time to create something awesome.


### Search for components

Tailwind Elements offers a vast collection of free components that are all:
- open source
- well-documented
- support dark mode

Go to the [Tailwind Elements documentation](https://tailwind-elements.com/docs/standard/getting-started/quick-start/) & find the component you're looking for in the **side navigation**.

I chose the [Tailwind CSS Table component](https://tailwind-elements.com/docs/standard/data/tables/). Specifically, I would like to use a [hoverable](https://tailwind-elements.com/docs/standard/data/tables/#hoverable) table to darken the rows that the cursor is hovering over, in order to make reading the data in my project easier.

It will also work on touch for mobile!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u8g99xg1qa7m52m06sfs.png)

After you click "show code" a block of code pops up. In the case of my table, this one:

```
<div class="flex flex-col">
  <div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
    <div class="inline-block min-w-full py-2 sm:px-6 lg:px-8">
      <div class="overflow-hidden">
        <table class="min-w-full text-left text-sm font-light">
          <thead
            class="border-b bg-white font-medium dark:border-neutral-500 dark:bg-neutral-600">
            <tr>
              <th scope="col" class="px-6 py-4">#</th>
              <th scope="col" class="px-6 py-4">First</th>
              <th scope="col" class="px-6 py-4">Last</th>
              <th scope="col" class="px-6 py-4">Handle</th>
            </tr>
          </thead>
          <tbody>
            <tr
              class="border-b bg-neutral-100 dark:border-neutral-500 dark:bg-neutral-700">
              <td class="whitespace-nowrap px-6 py-4 font-medium">1</td>
              <td class="whitespace-nowrap px-6 py-4">Mark</td>
              <td class="whitespace-nowrap px-6 py-4">Otto</td>
              <td class="whitespace-nowrap px-6 py-4">@mdo</td>
            </tr>
            <tr
              class="border-b bg-white dark:border-neutral-500 dark:bg-neutral-600">
              <td class="whitespace-nowrap px-6 py-4 font-medium">2</td>
              <td class="whitespace-nowrap px-6 py-4">Jacob</td>
              <td class="whitespace-nowrap px-6 py-4">Thornton</td>
              <td class="whitespace-nowrap px-6 py-4">@fat</td>
            </tr>
            <tr
              class="border-b bg-neutral-100 dark:border-neutral-500 dark:bg-neutral-700">
              <td class="whitespace-nowrap px-6 py-4 font-medium">3</td>
              <td
                colspan="2"
                class="whitespace-nowrap px-6 py-4 text-center">
                Larry the Bird
              </td>
              <td class="whitespace-nowrap px-6 py-4">@twitter</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
```


### Dark Mode
One of the coolest things about Tailwind Elements is that **every component supports dark mode**!

You can enable & customize your the dark theme in your Tailwind project, check out the [dark mode documentation](https://tailwind-elements.com/docs/standard/getting-started/dark-mode/) for Tailwind Elements.

So, what do I have to do in order to make a dark version of the table in my project?
**Nothing! The dark mode already works!**

Notice that in the code example above, some classes include the `dark` prefix. Those classes will overwrite the default ones when the dark mode is switched on. You can easily preview this by using the [dark mode toggle](https://tailwind-elements.com/docs/standard/getting-started/dark-mode/) in the Tailwind Elements documentation (upper right corner), or you can simply `shift + D` on your keyboard.

This is how my Tailwind Table looks with dark mode enabled.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4bnkk7cu20p5ptjkw4n2.png)

Not only the base [colors](https://tailwind-elements.com/docs/standard/content-styles/colors/) changed but also, the [hover effect](https://tailwind-elements.com/docs/standard/content-styles/hover-effects/) on the table switched to a light [mask](https://tailwind-elements.com/docs/standard/content-styles/mask/) instead of the dark mask, in order to preserve fine contrast.

### Custom Theme
The Tailwind theme config file enables you to create a [custom Tailwind Theme](https://tailwind-elements.com/docs/standard/getting-started/theming/) very easily.

All properties bound to the theme are in the Tailwind config file located at the root of your project: `tailwind.config.js`.

You can easily customize the:
- color palette,
- type scale,
- fonts,
- breakpoints,
- border-radius values,
& more


### Design Blocks
Another great resource is a collection of predesigned [Tailwind CSS sections](https://tailwind-elements.com/docs/standard/designblocks/landing-page/).

You will find templates for:

[Tailwind Hero Sections](https://tailwind-elements.com/docs/standard/designblocks/hero-sections/):
![Image description](https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/hero-sections/assets/new/10.webp)

[Tailwind Headers](https://tailwind-elements.com/docs/standard/designblocks/headers/):
![Image description](https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/headers/assets/new/4-main.webp)

[Tailwind Contact Sections](https://tailwind-elements.com/docs/standard/designblocks/contact/):
![Image description](https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/contact/assets/new/5.webp)

& much more.

Design Blocks can help you prototype your project quickly & customize the design later.

---

## Support
Tailwind Elements is 100% free, it offers free support on its [community on GitHub](https://github.com/mdbootstrap/Tailwind-Elements/discussions/categories/support-from-community).

They also welcome [contributions](https://tailwind-elements.com/contribute/) & release tutorials.

---

## Updates
Another great aspect of this project is that you can **track the progress live**.

Updates are pretty frequent & they display a progress bar for every release:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sjvk6eei00ea1kvotu86.png)
It tracks the [Tailwind Elements GitHub project progress](https://github.com/orgs/mdbootstrap/projects/1/views/1?layout=board).

---

## Summary

I hope that this guide will improve your experience with Tailwind CSS and enable you to create more powerful websites & apps. 

Make sure to join the Tailwind Elements open-source community & stay tuned.