6

How to quickly build a website using Tailwindcss and Tailblocks

 3 years ago
source link: https://dev.to/sidchaudhary04/how-to-quickly-build-a-website-using-tailwindcss-and-tailblocks-k22
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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 easy 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 modeExit 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 ๐Ÿ‘.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK