Tailwind UI Kit Basic Setup Using a Starter Kit

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

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

6. After you are done with that, you can use the command yarn dev or npm run dev to get the localhost server link.

7. Copy that link from the terminal into your browser.

8. By the way, this supports Hot Module Reloaded which allows you to make changes without manually reloading the page every time.

9. Once you’re ready to deploy, just use yarn build or npm build.

Well, that was all for today. I hope that helps you out. See ya in the next article ;)

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

Maheen
Maheen

Written by Maheen

Believe in turning dreams into vision and vision into reality. A devRel, coding girl, and a strong supporter of messy hair and sweatpants.

No responses yet

Write a response