Tailwind The Early Lessons: Setup Test Environment In Under 60 Seconds
My articles are aimed at those people just starting out on their webdev journey, I am myself a Jr WebDev, aged 42, remember you are never too old to learn how to code. I want to share with you the things I have learnt along the way and wish someone had taught me at the very beginning of my journey.
Did you read my article CSS The Early Lessons: Use Tailwind To Learn CSS quickly or perhaps you have just stumbled on this tutorial. Either way, you are making a wise choice in wanting to learn more about Tailwind, this could be the beginning of a great partnership in your tech stack.
I’m going to cover 2 examples of how you can set up a playground environment to test Tailwind, both solutions will take less than 60 seconds to configure, in fact, it will probably take longer to read this article.
First Example: Use your IDE of Choice (VS Code etc)
Tailwind offers a CDN (a remote link) to their framework. You wouldn’t use this in production but for testing it's perfect.
Start your timer!
Copy the below code into an HTML document.
<!doctype html>
<html> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0"> <script src="https://cdn.tailwindcss.com"></script>
</head> <body>
<h1 class="text-3xl font-bold underline text-red-500 p-5">
Hello world!
</h1>
</body> </html>
Open that webpage, you should see:
Stop Timer! Surely that was less than 60 seconds
Second Example: Use An Online Sandbox
There are many choices out there, but I like JSFiddle.com.
Start Your Timer!
Head to JSFiddle and copy this into the HTML box:
<h1 class="text-3xl font-bold underline text-red-500 p-5">
Hello world!
</h1>Then in resources type tailwind, this will automatically import tailwind for you. Once imported hit the Run button to see the HTML displayed in the results box.
Stop Timer! Surely that was less than 60 seconds
Summary
There you have it, 2 examples of how to spin up a super quick demo of Tailwind in under 60 seconds. Follow Me for future tutorials on Tailwind.
Final Note From Me
I’m sharing my experiences from the point of view of a Jr Dev with others on a similar level. These are the lessons I have learnt that I wish someone had told me about when I first started learning Web Development.
If you liked this article and want to treat me then please buy me a coffee, the caffeine will help me stay awake long enough to write more content:
Otherwise, I’d be equally as pleased if you gave this article a clap 👏 and followed me so we can continue our journey to Senior Dev together. 👍
