This project illustrates how Tailwind CSS can be used in a Vannila HTML + JavaScript setup.

What Tailwind CSS features are used:
  - Simple utility classes for setting padding, margin, colors
  - Flex layout, Grid layout
  - Breakpoints
  - Themes (Styling dark and light themes)
  - Layers (Defining reusable components and applying styles at base layer that are applicable for html elements)

Other important aspects of this project:
  - JavaScript local storage is used to permanently store the set theme by the user. This is not always required and Tailwind CSS can automatically pick the theme set at OS level.
  - Font size increas and decress does not use Tailwind CSS. JavaScript has been used to set the root element's font size. That changes the size of all components in the page. Why? (Hint: Think about how the rem unit works). Sizes applied by Tailwind are usually relative. That means even after styling elements with Tailwind, those sizes increase or decrease relative to root element font size.
  
Try this sample project:

  - Run command: npm install
  - Run command: npm run dev
  - Open the dev server URL in a web browser.
  - Open this directory in your code editor like VSCode to make changes (You mostly update index.html file only to add HTML markup elements and apply Tailwind CSS utility classes to them.).

How this project was created in the first place:

  Reference: Adding Tailwind CSS to a Vite project: https://tailwindcss.com/docs/installation/using-vite

  Commands:
    npm create vite@latest myproject
      - Select famework: Vanilla
      - Select varient: JavaScript
      - Select no immidiate installation and run

    Then,
      cd myproject
      npm install
      npm install tailwindcss @tailwindcss/vite
      # Now, add file vite.config.js which enables Tailwind CSS Vite plugin
      npm run dev

  Open the dev server URL in a web browser.
  Open the project (myproject) in your code editor like VSCode.
  Edit index.html, src/style.css, src/main.js