DEV Community

sid
sid

Posted on • Updated on

How to quickly build a website using Tailwindcss and Tailblocks

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

Top comments (6)

Collapse
 
shriji profile image
Shriji

tailblocks remain very unupdated

Collapse
 
sidcraftscode profile image
sid

True, but easily customizable

Collapse
 
knyttneve profile image
Mert Cukuren

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

Collapse
 
pbose profile image
pBose

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

Collapse
 
sidcraftscode profile image
sid

Thanks

Collapse
 
kartikpuri95 profile image
kartik puri

I recently combined this with react gatsby, tailwind is amazing