An absolute noob’s guide to Tailwind UI kit
Here’s the deal with the deal, I’m what you might call a pop-culture programmer. I’m not going to toot my own horn and say that I was an excellent programmer and that I took to computer science like birds to flight and fish to water (horrible analogies, I know, but this is a stream of consciousness writing, so I guess I get to take some liberties that I wouldn’t take elsewhere), but the fact of the matter is that at the heart of it, I fell in love with programming. Or, rather, the idea of coding. All that color popping out of a black IDE. That just drove me nuts, man. I swear to God
And that weird infatuation-relationship-on-again-off-again-fling-thing sort of got me acquainted with a lot of techs. I liked to tinker. Still, very much do. I learned some game development in Unity and Unreal, some basic front-end development, a little bit of algorithm development, a little bit of graphics using GSAP, and Blender. I wouldn’t even go so far as to call myself a Jack of all trades. More like the jack-shit of all trades. Anyway, I digress.
There’s this season that you might have watched, it’s called Silicon Valley, and it’s got like these programmers who’re vibing with each other and coding and drinking Slurpee’s and zoning out to some excellent jam sessions, developing apps, making algorithms, and all that nerdy shit.
The way I’m tangentializing every which way, it seems like I’m going to end up writing my whole autobiography right here, so, as much as I love to write, I’ll get to the point.
After I — in perfect average-comp.-sci.-undergrad-who-thinks-she’s-the-shit fashion — dropped out of university, I kept on freelancing and have been doing so for more than five years now. So much about me. Isn’t it? Let’s not forget, we’re here to talk about TUK, so let’s get to it.
So, I’m a HUGE believer in the 10,000-hour rule. I don’t know if you’ve heard about it, but the crux of it is that once you’ve practiced a particular skill for the aforementioned number of hours, you become an outlier, an expert, a savant in that field. Being a strong believer in it, I want to spend my 10,000 hours on the grind for programming, coding, and development.
Here’s where it gets really jarring for someone like me, who’s been out of touch with tech for so long. I didn’t know where to go. I went on a digital shopping spree and bought a ton of courses ranging from MERN stack to UI/UX Design, which only made me all the more overwhelmed. Then I turned to Brad Traversy, who’s an amazing tutor on YouTube and Udemy, and, I’ll be honest, he really helped me out with getting back in touch with my roots. I did his HTML, CSS, and JavaScript crash courses, which allowed me to breathe a bit.
But here’s the thing with tutorials, no offense to all the talented people who make them: Most of the time, at least in my unfortunate case, they teach fuck-all about real-world implementation and practical deployment of the skills they teach you. We get it, this is a WhatsApp clone, this is a Shopify clone. What can I do with it, other than practice the fundamentals of what I already know? Yes, the grind part is important, but I’d like to grind somewhere useful.
So, following the father of Microsoft’s advice, I decided to take the lazy way to make my first landing page, because honestly, lazy is like ninety-percent of my personality. So, I started googling how to make a landing page real quick. Yes, yes, I came across WordPress, Elementor, Wix, and all that stuff, but that wasn’t just doing it for me. I needed something that was scarce in the market so that I’d be able to turn myself into a valuable commodity, should I get hired someplace.
Here’s the thing, back in 2018 React and React Native was the hot shit. And also, like, people were moving on from other PHP to Node.js, if I’m remembering it correctly. My apologies for being incorrect here, I’m no expert. I’m not even a beginner or anything. I’m just an idiot who tries to learn a thing or two along the way. So, yeah, back then, Bootstrap was huge. I also remember Semantic UI being really popular at one point, then there’s Bulma and Foundation too.
But, see, I wanted to do something that a lot of people weren’t doing before. So, amidst my vain attempts to discover something that’d both solve my problem, I came upon this salvation. Tailwind CSS. Apparently, you don’t have to worry about creating a separate CSS file and everything. Everything that you do, you do without ever leaving your HTML. For a noob like me, who had only just gotten the hang of basic HTML (tags, attributes, lists, yadda-yadda), this was, let’s not say shortcut, a quicker route to making good landing pages, using pre-made components to make my website look bespoke.
Did I say pre-made components? Of course, I did. That’s not something core Tailwind. Well, it is, but not exactly. I’m not making much sense so I’ll get right into the kit that I came across and used.
Tailwind UI Kit is what I’m talking about. I came across it on pure chance. See, I learned not so long ago that coding is not just about memorizing lines and chunks of code as much as it is about figuring out how to use Google right. Is it just me or is that something you can relate to?
So, upon googling Tailwind, I came across the kit, and man I’ll tell ya, it was something so freaking elegant, easy to use, affordable, efficient, and convenient, that I fell in love with it at first sight.
Here’s what TUK (Tailwind UI Kit) allows you to do. There are over 350 components that you can simply copy-paste to your project and not have to worry about coding everything on your own. Gone are the days of pulling your hair when stuck in a rut. If you don’t want to use components, you can always opt for pre-made templates with numerous screens and components already integrated into them. TUK has around 10 templates with more than 50 screens that you can use. That’s just pure convenience right there, and as compared to other kits, such as Elementor, you have a very clean and hassle-free way of doing things.
And the best part is that it’s not just limited to Tailwind. There’s going to be support and integration for JavaScript as well. I’m talking Vue, React, Angular, and Vanilla JS.
So I bought myself a license, went to the components section, tried it all out on Code pen, then decided to install the required stuff (npm, yarn, git, tailwind) on my computer, and began tinkering with the components and templates to come up with my very own website, and I’ll tell you an amazing thing: For someone like me, who’d just gotten into basic HTML and even more basic CSS, doing this all with TUK was like sailing a smooth sea on a breezy morning with the port just in sight, the port being my becoming a web developer sometime in the near future.
So if an absolute newbie like me can figure it all out, I’m pretty sure that a developer or a programmer such as yourself can get started right away and start using the components and templates for your project in no time.
I haven’t been paid to promote this, FYI. It’s just that I came across a gold mine and I want to share it with you. Maybe it helps you out, maybe it doesn’t, but what’s the harm in me sharing something that will possibly be beneficial to you and your web development?
Do try it out at https://tuk.dev/ and let me know if you found it useful. There are detailed guides on how to configure it all out and use it in your existing projects.
You know what? I kinda wanna share my process with you, so I’ll share how I went about using TUK.
Here we go:
So the first thing you wanna do is go to the TUK website (link shared above) and then check out their membership options. There are three options that you can opt for, which are: The Community License for test driving TUK, and it’s available for free, by the way; then there’s the Developer License, which costs around $189 and is for an individual developer to accelerate their project; and lastly, there’s this Team License for full project ROI, which costs around $489.
Then check the website out. When I say that the UX and UI are elegant, I’m not exaggerating.
Then you can check out their templates and components from their main page.
Click on either the components button or the templates button. However, I used the templates one to just tinker with it and see how it worked out.
There are two major categories within the templates section. One’s the Web Application UI, and the other’s the Marketing one. Here are their pictures.
There are multiple sub-sections in the Web App UI section, them being: Master Layouts, Layouts, Navigation, Headings, Tables, Forms, Overlays, Feedback, and UI Elements, and all of them have got numerous components in them. This much I’ll say, whoever made the Kit was really thorough with everything. Major props to them. Anyway, moving on.
The Marketing section has got Page Sections that include CTA, Hero, Features, and so many more sub-sections with dozens of components in them.
Once you’ve browsed through the templates and picked one that you liked, go to Codepen and make an account if you already don’t have one. I’m assuming that everyone already has an account, as it’s a good and quite famous prototyping site.
Let’s get back to the components section. So, what I did was, I scrolled all the way down to the Marketing section and clicked on Hero, and was blown the hell away by the components there. Here, lemme show you.
Just frikking look at it.
Now click on the Show Code toggle and you’ll get a whole bunch of code, including HTML, Vanilla JS, React, and Angular. It, according to the site, will have Vue.js support as well.
Now that you have the code and everything, go to Codepen, open up a pen, and click on the CSS gear. Here, look at this.
In the Add External Stylesheets/ Pens’ resources text area, type in tailwind CSS and click on it. Then copy the code (in the HTML area), like so:
And Booya, you now have the Hero section.
It’s literally that simple. And now that you know how big of a wannabe-newb that I am and I figured out, so you can too.
With all that said and stated, I think you’ve got an idea of how awesome TUK is and what it means for both beginner developers as well as veteran ones who’ve been in the industry long enough to recognize trends for tools, frameworks, and libraries, and I think the analysts among you know that right now, the market for Tailwind is not saturated at all. Its new tech, it’s not made it to the mainstream, and its good tech.
I would definitely recommend you check out this UI kit (TUK) and I can assure you, it will worth every single penny.
