How to add Tailwind CSS to an existing project

Maheen
3 min readSep 28, 2020

--

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:

tailwinduikit.com

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.

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