How to quickly build a website using Tailwindcss and Tailblocks

Update: Since then I have rebuilt my website from ground up. However, I still stand by the fact that Tailblocks is a great resource.

I recently discovered this tool that allowed me to rapidly build my website. Hope it might be useful.

What is Tailwindcss

Tailwindcss is a utility based css framework for rapid development and is very useful in some cases. My own website is built entirely on tailwindcss, so I definitely would recommend it to you.

Tailblocks

Tailblocks is a very simple tool that provides you with readymade Tailwindcss blocks. It includes most of the blocks that you would need to build a great website, including navbars, hero sections and footers.

How to use

  1. Setup your html document like below
<iDOCTYPE html>
<html>
<head>
<meta name="viewport"  content="width=device-width, initial-scale=1.0">
<title>Your title</title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

  1. Go to tailblocks

  2. Pick out a block you like. Alt Text

  3. Click the ‘<>View Code’ button.

  4. Copy the code.

  5. Paste it into the html document and voila 🤯

  6. Repeat the process with as many blocks as you like 👍.

Thanks for reading. If you liked the article you can buy me a coffee! Buy Me A Coffee