Tailwind UI Kit Basic Setup Using a Starter Kit

5 min readSep 29, 2020

Hello there.

In my previous article, I talked about my journey and my experience with TUK, and how it became one of my favorite UI kits. So in this article, I thought to share how to get started with the Tailwind UI kit using a starter kit. If you haven’t read my previous article, so here is a brief background of TUK.

TUK is a UI kit that has been made by the developers for the developers to make their lives easier. A kit that will help you in creating impressive UIs in your own unique way. A highly customizable kit, it comes with more than 350 pre-made components and around 10 templates that you can use to kickstart your project. Just check it out: TailwindUIKit

There must be one question that’s striking your mind right now: So many UI kits out there then why to choose TUK?

Lemme tell you. Say you’re in the middle of a project and require a table for displaying products, TUK can easily do that within a matter of minutes from its premade table components. Similarly, if you want to show some data in a card format, there are components for that as well. Do you require alerts for your application? Well, look no further. If you need a page with inputs and tabs for settings, TUK is your go-to kit.

Of course, you have to buy a developer’s license, which, honestly, is worth every dollar and need I mention, it’s dirt cheap. Well, that’s a bit relative, depending on whether you think $189 is a ton of money or loose change worth of five days of Venti Lattes from Starbucks. Since most of you are developers, I’m gonna go with the former.

You can quickly get started with TUK’s starter kit and use it for prototyping, MVPs, and showing your clients a quick demo. And if you need a landing page for your product, you can do so with the starter kit easily.

Here’s what you’re going to do:

Once you bought yourself a license (or if you don’t want to, you can always opt for the Community license, no worries), login to TUK, and go to their Explore page. There you’ll come across their Get Started Guide button. Click on it and it will lead you to their documentation.

There are two to three ways that you can use the UI Kit: You can use it in your current project; you can use it with its CDN; and lastly, you can use a basic starter kit with a bundler like Webpack or Rollup or Parcel.

For this guide, let’s go with Rollup, shall we?

All right then, go to the bottom of the documentations page and there’s going to be a heading called TUK starter kits. According to your preference, pick the bundler of your choice and click on it. It shall lead you to the GitHub repository, where there’s a very detailed guide on how to do things. But I’ll share it with you anyhow if you’re a bit confuddled. We’re in it to help each other out, after all.

So, I selected the Rollup one, because, let’s be candid for a moment, that seemed like the easiest to me and me being the lazy procrastinator that I am, wanted the most convenient option available.

Once you’re on the GitHub repository, scroll down to Getting Started and just follow their instructions.

For someone just starting out into web development — such as myself — I’m going to share the process here.

Clone the repository using the following command on your Git Bash or terminal: https://github.com/AlphaSquadTech/rollup-starter-with-tailwind.git && cd rollup-starter-with-tailwind

2. Next, you’re gonna install either yarn or npm. I’m choosing to go with yarn. So, you can just type in yarn in the terminal and it will install on its own.

3. So, once all of that is done, open the rollup-starter-with-tailwind folder with your IDE of choice.

4. To make changes, go to /src/app.js or /src/components/index.js and add in components of your choice from the components section in the TUK website.

5. If you want to add fonts, you can do so from /src/css/style.css