Hi. How’s y’all. Doing great, having fun. Right? or No? No worries. We will talk about it but not now because that’s not what this article is about.
Today I am here to share my experience with the Tailwind UI Kit and how it made my job easy when it came to developing a landing page or one of the OGs of soccer: Cristiano Ronaldo
So, I made a landing page thingy with a Hero, basic boilerplate stuff, to be frank. Here’s the video that I watched and did a code-along with. It’s not even a long video or anything; just ten minutes long.
So, once you’ve done that, let’s move on to adding Tailwind CSS to our existing project.
The UI Kit I’m using is TUK, as in Tailwind UI Kit. It’s the best UI Kit I have come across so far in my one-week life as a web developer. Here is a link to it:
So, what I did was, I went to the Get Started guide, scrolled down to the Use Tailwind CSS via CDN, and just copy-pasted the link below:
Here, I’ll show you on VS Code:
Then, I went to the components section on the TUK website. By the way, you have to buy a license to be able to use TUK for your development. There’s a community license as well, which is free, but the development one costs around $189.
Let me just tell you right now that investing in the license is going to be worth your while. Spend money to make money and all that banality.
So, once you’re there, go-to components, scroll down to Marketing, and click on Stats:
It’s got two components. I chose the first one:
Then I clicked on the Show Code toggle and copied the HTML code.
Then I put in my index.html, plain copy paste.
I’m using Live Server, by the way. Once I hit Save, the page that showed up looked like this:
How freaking simple was that?
Then I did a bit of tinkering with the code and came up with this:
And that, ladies and gents and people of other genders, is how you add Tailwind CSS to an existing project using TUK.
If you’ve got any questions, just send a message my way and I’ll help you in any way I can.
Peace out.
