DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 967,611 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Tailwind CSS for Dummies (part 1)
Eric The Coder
Eric The Coder

Posted on • Updated on

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:
codepen
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
create new pen

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
Alt Text

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>
Enter fullscreen mode Exit fullscreen mode

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

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

Top comments (1)

Collapse
 
arvindsridharan profile image
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.

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›