Tailwind Elements

𝙃𝙪𝙜𝙚 collection of Tailwind components, sections and templates

TailwindCSSBootstrap
mdbootstrap/TW-Elementstw-elements.com

README

TW Elements


TW Elements is a huge collection of free, interactive components for Tailwind CSS.

Community


TW Elements is a community-driven project.
We invite you to track our live progress 👁️ on the upcoming release.

In the meantime you can also:

- Motivate us with some words of encouragament ❤️
- Share your ideas & feature requests 💡
- Aks for help & help others in our community support 🙏
- Engage, discuss & have fun in our open-source community 💬

If you want to help the project grow, start by simply sharing it with your peers!

Thank you!


Coming soon


Check out the upcoming features - make sure to join the waiting list in order to get early access!


Components


A collection of stunning components made with attention to the smallest details. Forms, cards, buttons, and hundreds of others – in TW Elements you will find all the essential elements necessary for every project.

Installation


NPM

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:

  1. ```
  2. npm install tw-elements
  3. ```

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

  1. ```javascript
  2. module.exports = {
  3.   content: [
  4.     "./src/**/*.{html,js}",
  5.     "./node_modules/tw-elements/dist/js/**/*.js",
  6.   ],
  7.   plugins: [require("tw-elements/dist/plugin")],
  8.   darkMode: "class",
  9. };
  10. ```

4.  Dynamic components will work after adding the js file:

  1. ```
  2. <script src="./TW-ELEMENTS-PATH/dist/js/tw-elements.umd.min.js"></script>
  3. ```

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

  1. ```
  2. import 'tw-elements';
  3. ```

MDB GO / CLI

Create, deploy and host anything with a single command.

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

  1. ```
  2. npm install -g mdb-cli
  3. ```

2. Log into the CLI using your MDB account:

  1. ```
  2. mdb login
  3. ```

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

  1. ```
  2. mdb init tailwind-elements-free
  3. ```

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

  1. ```
  2. npm install
  3. ```

5. Run the app:

  1. ```
  2. npm start
  3. ```

6. Publish when you're ready:

  1. ```
  2. mdb publish
  3. ```

CDN

You can easily test TW 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:

  1. ```
  2. <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" rel="stylesheet" />
  3. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tw-elements/dist/css/tw-elements.min.css" />
  4. <script src="https://cdn.tailwindcss.com"></script>
  5. <script>
  6.   tailwind.config = {
  7.     darkMode: "class",
  8.     theme: {
  9.       fontFamily: {
  10.         sans: ["Roboto", "sans-serif"],
  11.         body: ["Roboto", "sans-serif"],
  12.         mono: ["ui-monospace", "monospace"],
  13.       },
  14.     },
  15.     corePlugins: {
  16.       preflight: false,
  17.     },
  18.   };
  19. </script>
  20. ```

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

  1. ```
  2. <script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/tw-elements.umd.min.js"></script>
  3. ```