Introduction#

getting started with tailwindcss, demo here

  • setup tailwind
  • create a home page
web-css-color

Install#

Assume that npm and tailwind cli already installed, then create a tailwind.confg.js file as

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {}
  },
  plugins: []
}

project structure

day-1
  |--dist
     |--output.css
  |--src
     |--input.css
     |--index.html
  |--tailwind.config.js
  |--readme.md

Use#

a sample html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/dist/output.css" rel="stylesheet" />
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">Hello world!</h1>
  </body>
</html>

build and see it

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Home Page#

navigation bar

<div class="bg-green-400 py-3">
  <nav class="flex mx-auto max-w-5xl justify-between">
    <a href="#"> Entest </a>
    <ul class="flex gap-x-3">
      <li
        class="bg-green-800 hover:bg-green-600 text-white px-3 py-1 rounded-sm"
      >
        <a href="#">Features</a>
      </li>
      <li
        class="bg-green-800 hover:bg-green-600 text-white px-3 py-1 rounded-sm"
      >
        <a href="#"> Pricing </a>
      </li>
      <li
        class="bg-green-800 hover:bg-green-600 text-white px-3 py-1 rounded-sm"
      >
        <a href="#"> Support </a>
      </li>
      <li
        class="bg-white hover:bg-green-600 hover:text-white px-3 py-1 rounded-sm"
      >
        <a href="#">Login</a>
      </li>
    </ul>
  </nav>
</div>

hero section

<div
  class="bg-[url('https://d2cvlmmg8c0xrp.cloudfront.net/web-css/singapore.jpg')] bg-no-repeat bg-cover"
>
  <div class="mx-auto max-w-5xl pt-20 pb-48 pr-48 mb-10 text-right">
    <h2 class="text-3xl font-bold mb-8">Entest Help You Next Level in Cloud</h2>
    <a
      href="#"
      class="text-white text-2xl px-2 py-2 bg-green-800 hover:bg-green-600"
    >
      Get Started
    </a>
  </div>
</div>

main section

<div class="mx-auto max-w-5xl">
  <div class="flex gap-x-5">
    <div class="ml-4 bg-white">
      <h4 class="font-bold mb-8">Work together, even if you're apart</h4>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vel
        ex dolor voluptas! Laborum voluptatem et, expedita cumque ex distinctio
        veniam tempore sit? Sed ipsam ea tenetur culpa quasi laborum.
      </p>
    </div>
    <div class="ml-4 bg-white">
      <h4 class="font-bold mb-8">Work together, even if you're apart</h4>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vel
        ex dolor voluptas! Laborum voluptatem et, expedita cumque ex distinctio
        veniam tempore sit? Sed ipsam ea teneitur culpa quasi laborum.
      </p>
    </div>
    <div class="ml-4 bg-white">
      <h4 class="font-bold mb-8">Work together, even if you're apart</h4>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vel
        ex dolor voluptas! Laborum voluptatem et, expedita cumque ex distinctio
        veniam tempore sit? Sed ipsam ea tenetur culpa quasi laborum.
      </p>
    </div>
  </div>
</div>

footer section

<footer class="bg-gray-200 mt-12 text-gray-00 py-4">
  <div class="mx-auto max-w-5xl text-center text-base">
    Copyright &copy; 2023 entest, Inc
  </div>
</footer>