Upgrade Your Tailwind CSS Experience: Here's How to Get Started

#tailwindcss #webdev #javascript #html

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
Date & time pickers
Modals
Complex navigation like mega-menu, scrollspy or sidenav
Carousels, sliders, galleries & more

Tailwind Elements
How to install Tailwind Elements
- npm
- MDB GO / CLI
- CDN
- .ZIP Starter
Build something!
Support
Updates
Summary

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.

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 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")]
};

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.

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 tailwind-elements-free
Install the dependencies (inside the project directory):
npm install
Run the app:
npm start
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.

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 & find the component you're looking for in the side navigation.

I chose the Tailwind CSS Table component. Specifically, I would like to use a 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!

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

Not only the base colors changed but also, the hover effect on the table switched to a light mask instead of the dark mask, in order to preserve fine contrast.