DEV Community

loading...

How to quickly build a website using Tailwindcss and Tailblocks

sidchaudhary04 profile image Siddharth Chaudhary 惻Updated on 惻1 min read

Tailwindcss Logo
I recently discovered this tool that allowed me to rapidly build my own 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">
Enter fullscreen mode Exit fullscreen mode
  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

Discussion (6)

pic
Editor guide
Collapse
shriji profile image
Shriji

tailblocks remain very unupdated

Collapse
sidchaudhary04 profile image
Siddharth Chaudhary Author

True, but easily customizable

Collapse
knyttneve profile image
Mert Cukuren

I've started working on making Tailblocks compatible with Tailwind CSS v2.0

Collapse
nebulabyte profile image
NebulaByte

Love Tailwind man. It's really awesome for any kind of project.

Collapse
sidchaudhary04 profile image
Collapse
kartikpuri95 profile image
kartik puri

I recently combined this with react gatsby, tailwind is amazing