Tailwind CSS for Dummies (part 1)

Follow me on Twitter: Follow @justericchapman

I am not good at CSS

One of my weakness as a web developer is CCS. I barely understand regular CSS. It's not a stretch to qualify me as a CSS Dummies.

But, I will soon begin a new project that have Tailwind CSS as a requirement. So I have no choice but start learning asap! I am dummies but a motivated dummies :-)

I take the decision to learn and understand Tailwind CSS step by step in the next 30 days.

Each day I will make baby step and practice a new concept and make real world example.

If you are a CSS beginner and want to learn step by step with me, you can take the 30 day challenge and click follow me.

Easy setup

To start learning as fast as I can. I will begin with a simple setup. Later in the month I will setup a production setup but for now, lets learn to walk before running!

One of the best platform to learn coding html and css is CodePen (https://codepen.io/)

CodePen is a web site that allow you to write html/css/js code and see the result. You can save and share your result.

So go to codepen.io:

If you dont have an account you can take 2 mins and create one.

Once your account is created you can click on Pen (on top/left in the CREATE section). That action will create a new codePen

Now from there you can write any html css or js and you will see the result live refresh in the bottom of the page.

Since we will not write regular css but Tailwind CSS we have to tell codePen to include a reference to Tailwind. That can be done by clicking the setting icon left to CSS section

Once the setting page is open, scroll down to: Add External Stylesheets/Pen

In the search field type: Tailwind. You then should see the Tailwind CSS option. Click on it to select. Then click save and close.

That's it. You are now ready to type some Tailwind CSS code.

Let do a small example.

In the html box type:

<div class="text-4xl">
    Hello World
</div>

If everything is setup ok you should see a big hello world:

Conclusion

That's it for today. Tomorrow the learning journey begin! Stay tune and follow-me to miss nothing.

You can follow me on Twitter: Follow @justericchapman

Comments

[arvindsridharan]

Awesome! All libraries are built on vanilla css. So why not master it and rest will follow.

I am from sales background with little exposure to technology but I picked up css quite fast. So you too can.