- Published on
The Ninja Guide To How To Build A ToDo List App - Ui With Tailwind CSS Better
- What is Tailwind CSS?
- The description of ToDo List App - Ui ui component
- Why use Tailwind CSS to build a ToDo List App - Ui ui component?
- The preview of ToDo List App - Ui ui component
- The source code of ToDo List App - Ui ui component
- How to build a ToDo List App - Ui with Tailwind CSS?
- Install tailwind css of verion 3.0.18
- All the unility class needed to build a ToDo List App - Ui component
- 35 steps to build a ToDo List App - Ui component with Tailwind CSS
- Conclusion
What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework that focuses on creating personalized user interfaces quickly. It can gives you all the building blocks you are able to create personalized designs without having to fight to override irritating opinionated styles. Also, Tailwind CSS is a highly configurable, low-level CSS framework.
The description of ToDo List App - Ui ui component
A simple todo list app ui card desgined by vipin bansal under thecaffienecode
Why use Tailwind CSS to build a ToDo List App - Ui ui component?
- It can make the building process of ToDo List App - Ui ui component faster and more easily.
- Enables building complex responsive layouts and components freely.
- Minimum lines of CSS code in ToDo List App - Ui component file.
The preview of ToDo List App - Ui ui component
Free download of the ToDo List App - Ui's source code
The source code of ToDo List App - Ui ui component
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ToDo App</title>
<link href="https://unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="w-full h-screen bg-gray-100 pt-8">
<div class="bg-white p-3 max-w-md mx-auto">
<div class="text-center">
<h1 class="text-3xl font-bold">ToDo App</h1>
<div class="mt-4 flex">
<input
class="w-80 border-b-2 border-gray-500 text-black"
type="text" placeholder="Enter your task here"
/>
<button
class="ml-2 border-2 border-green-500 p-2 text-green-500 hover:text-white hover:bg-green-500 rounded-lg flex"
>
<svg class="h-6 w-6" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z"/> <circle cx="12" cy="12" r="9" /> <line x1="9" y1="12" x2="15" y2="12" /> <line x1="12" y1="9" x2="12" y2="15" /></svg>
<span>Add</span>
</button>
</div>
</div>
<div class="mt-8">
<ul>
<li class="p-2 rounded-lg" >
<div class="flex align-middle flex-row justify-between">
<div class="p-2">
<input type="checkbox" class="h-6 w-6 " value="true" checked/>
</div>
<div class="p-2">
<p class="text-lg line-through text-gray-400">Cook maggie</p>
</div>
<button
class="flex text-red-500 border-2 border-red-500 p-2 rounded-lg">
<svg class="h-6 w-6 text-red-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10" /> <line x1="15" y1="9" x2="9" y2="15" /> <line x1="9" y1="9" x2="15" y2="15" /></svg>
<span>Remove</span>
</button>
</div>
<hr class="mt-2"/>
</li>
<li class="p-2 rounded-lg" >
<div class="flex align-middle flex-row justify-between">
<div class="p-2">
<input type="checkbox" class="h-6 w-6 " value="true" />
</div>
<div class="p-2">
<p class="text-lg text-black">Wash disc</p>
</div>
<button
class="flex text-red-500 border-2 border-red-500 p-2 rounded-lg">
<svg class="h-6 w-6 text-red-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10" /> <line x1="15" y1="9" x2="9" y2="15" /> <line x1="9" y1="9" x2="15" y2="15" /></svg>
<span>Remove</span>
</button>
</div>
<hr class="mt-2"/>
</li>
</ul>
</div>
<div class="mt-8">
<button
class="border-2 border-red-500 p-2 text-red-500"
>Clear Completed Task</button>
<button
class="border-2 border-indigo-500 p-2 text-indigo-500 ml-4"
>Reset Todo List</button>
</div>
</div>
</div>
</body>
</html>
How to build a ToDo List App - Ui with Tailwind CSS?
Install tailwind css of verion 3.0.18
Use the script html tag to import the script of Tailwind CSS of the version 3.0.18
<script src="https://cdn.tailwindcss.com"></script>
All the unility class needed to build a ToDo List App - Ui component
w-fullh-screenbg-gray-100pt-8bg-whitep-3max-w-mdmx-autotext-centertext-3xlmt-4flexw-80border-b-2border-gray-500text-blackml-2border-2border-green-500p-2text-green-500hover:text-whitehover:bg-green-500h-6w-6mt-8flex-rowtext-lgtext-gray-400text-red-500border-red-500mt-2border-indigo-500text-indigo-500ml-4
35 steps to build a ToDo List App - Ui component with Tailwind CSS
Use
w-fullto set an element to a 100% based width.Use
h-screento make an element span the entire height of the viewport.Control the background color of an element to gray-100 using the
bg-gray-100utilities.Control the padding on top side of an element to 2rem using the
pt-8utilities.Control the background color of an element to white using the
bg-whiteutilities.Control the padding on all sides of an element to 0.75rem using the
p-3utilities.Set the maximum width/height of an element using the
max-w-mdutilities.Control the horizontal margin of an element to auto using the
mx-autoutilities.Control the text color of an element to center using the
text-centerutilities.Control the text color of an element to 3xl using the
text-3xlutilities.Control the margin on top side of an element to 1rem using the
mt-4utilities.Use
flexto create a block-level flex container.Use
w-80to set an element to a fixed width(20rem).Control the border color of an element to b-2 using the
border-b-2utilities.Control the border color of an element to gray-500 using the
border-gray-500utilities.Control the text color of an element to black using the
text-blackutilities.Control the margin on left side of an element to 0.5rem using the
ml-2utilities.Control the border color of an element to 0.5rem using the
border-2utilities.Control the border color of an element to green-500 using the
border-green-500utilities.Control the padding on all sides of an element to 0.5rem using the
p-2utilities.Control the text color of an element to green-500 using the
text-green-500utilities.Control the text color of an element to white on hover using the
hover:text-whiteutilities.Control the background color of an element to green-500 using the
hover:bg-green-500utilities on hover.Use
h-6to set an element to a fixed height(1.5rem).Use
w-6to set an element to a fixed width(1.5rem).Control the margin on top side of an element to 2rem using the
mt-8utilities.Use
flexto create a block-level flex container.Control the text color of an element to lg using the
text-lgutilities.Control the text color of an element to gray-400 using the
text-gray-400utilities.Control the text color of an element to red-500 using the
text-red-500utilities.Control the border color of an element to red-500 using the
border-red-500utilities.Control the margin on top side of an element to 0.5rem using the
mt-2utilities.Control the border color of an element to indigo-500 using the
border-indigo-500utilities.Control the text color of an element to indigo-500 using the
text-indigo-500utilities.Control the margin on left side of an element to 1rem using the
ml-4utilities.
Conclusion
The above is a step-by-step tutorial on how to use Tailwind CSS to build a ToDo List App - Ui components, learn and follow along to implement your own components.