𝙃𝙪𝙜𝙚 collection of Tailwind MIT licensed (free) components, sections and templates
TW Elements is a community-driven project that offers a vast collection of free, interactive components for Tailwind CSS. It provides users with a wide range of essential elements necessary for any project, including forms, cards, buttons, and more. In addition, TW Elements also offers responsive landing page blocks built with Tailwind CSS, with examples such as teams, services, projects, and FAQs. The installation process is straightforward, with options for NPM, MDB GO / CLI, and CDN, making it accessible to users regardless of their preferred method.
Before starting the project, ensure that you have Node.js (LTS) and Tailwind CSS installed. Then, run the following command to install the TW Elements package via NPM:
npm install tw-elements
Inside the tailwind.config.js file, include TW Elements as a plugin. It is recommended to extend the content array with a JavaScript file that loads dynamic component classes. After adding the JavaScript file, dynamic components will work properly.
Alternatively, you can import TW Elements using a bundler, like this:
import 'tw-elements';
Using MDB GO / CLI, you can create, deploy, and host anything with a single command. To start using MDB GO / CLI, install it with the following command:
npm install -g mdb-go-cli
Log into the CLI using your MDB account. Then, initialize a project and choose Tailwind Elements from the list. Install the dependencies inside the project directory and run the app. Once you’re ready, publish your project.
To test TW Elements without installing any packages, you can simply add CDN scripts to your classic HTML template. Add the following stylesheet files in the head section:
<link rel="stylesheet" href="https://cdn.example.com/tw-elements.css">
<link rel="stylesheet" href="https://cdn.example.com/tw-elements-custom.css">
Require the bundled JavaScript file right before the closing body tag:
<script src="https://cdn.example.com/tw-elements.js"></script>
TW Elements is a community-driven project that offers a comprehensive collection of free, interactive components for Tailwind CSS. It includes essential elements and responsive landing page blocks. The installation process is straightforward, with options for NPM, MDB GO / CLI, and CDN. Overall, TW Elements provides users with a convenient and accessible way to enhance their Tailwind CSS projects with pre-designed components and design blocks.