Let’s build a todo with Mini.js and TailwindCSS.

This demo uses [email protected]

Last updated on March 17, 2024 by Joeylene

TABLE OF CONTENTS

Screen Recording 2024-02-20 at 5.05.02 PM.mov

Installation

Setup your index.html and include the script to Mini.js and link to TailwindCSS:

<script src="<https://cdn.mini-js.com/1.0.6.js>"></script>
<link rel="stylesheet" href="<https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css>" />

Add a Title

Let’s add a title to the mini app:

<div class="p-32 flex items-center justify-center">
  <div class="flex flex-col gap-4">
    <h1 class="text-center text-black text-4xl">Mini Todo</h1>
  </div>
</div>

Create a List of Todos

First, let’s setup the todos array:

<script>
  todos = ['Clean the dishes']
</script>

Then, render each todo using the :each and :text directive:

<ul
  :each="item in todos"
  class="list-disc text-black text-base flex flex-col gap-4"
>
  <li class="flex items-center justify-between gap-2">
    <span :text="item"></span>
  </li>
</ul>

Add a Todo to the List

To add a new todo to the list, we first need to create an input for it:

<h1 ...>Mini Todo</h1>

<input
  type="text"
  class="py-1 px-2 border border-gray-200 text-black text-base shadow-sm rounded"
/>

<ul
  ...