Installation and setup

I will show you 2 methods to install TW Elements:

  1. CDN method - the easiest and fastest method, but with many limitations. In fact, it should only be used for quick testing.
  2. MDB CLI installation - a recommended method that allows you to use the full potential of the TW Elements environment

I suggest you try both methods, but in the end it's best if you use MDB CLI.

In this lesson, we will use the CDN method. This means that instead of the normal installation, we will simply attach the appropriate links to our project and thanks to this we will be able to use Tailwind and TW Elements.

Note: The code editor is a matter of preference, but if someone asks me what I would recommend, my answer is Visual Studio Code.

It's free and you can download it here.

Step 1 - create an empty folder

Create an empty folder in a convenient location for you and name it whatever you want.

I created mine on the desktop and named it "te-quick-start" ("twe" being short for TW Elements)

Next, open this folder in your code editor.

Step 2 - create index.html file

Create a new file and name it index.html

In Visual Studio Code, you can click ctrl + n to create a new file, then ctrl + s to save the file.

Save the file as index.html in the folder created in the previous step.

Step 3 - add basic HTML

Add basic structure and HTML tags to your index.html file

After saving the file, open it in the browser by dragging and dropping it into the browser window.

You should see a blank screen, but the tab title will say "TW Elements Quick Start"

Step 4 - add TW Elements

Now we will add few links to our index.html file, namely:

  • Roboto font
  • TW Elements styles
  • Tailwind CSS config
  • TW Elements JavaScript

Update the index.html file so that it looks like this:

Step 5 - test if it works

Everything is now ready and should work as it should. So let's take one of the TW Elements dynamic components, for example Carousel and insert it into our project.

Go to the Carousel docs, click show code button and copy the HTML code of the basic example:

Note that there is also a JavaScript tab, and the code there is used to initialize the components. However, when using Tailwind Elements in CDN form, we don't need to initialize them and all components work out of the box, just with pure HTML.

So let's paste the copied Carousel HTML code below the opening <body> tag:

After saving the file and refreshing your browser window, you should see a working carousel. After clicking on the arrows, the slides should change, which means that both the TW Elements styles and the necessary JavaScript work correctly.

...

If something doesn't work, make sure you followed all the steps correctly. Finally, your index.html file should look like this:

Step 6 - play with TW Elements

If everything works as it should, all you have to do is browse through the available components and functionalities and experiment with Tailwind Elements.

Simply copy it from our documentation and paste to your index.html file.

In the menu on the left you will find dozens of different components and hundreds of options.

Have fun!

If something doesn't work as it should, you can always hit me on twitter 😉

Note: The CDN method is for testing and experimentation. You shouldn't use it for serious projects. Once you're done with the playing around, move on to the next lessons and install TW Elements using MDB CLI method.

Prev Next
John Doe

About author

Michal Szymanski
@ascensus_mdb

Co Founder at TW Elements and MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.