Building and Deploying a Website with Tailwind CSS: A Comprehensive Guide

This chapter provides a step-by-step guide to building and deploying a website using Tailwind CSS. Tailwind CSS is a utility-first CSS framework that offers a different approach to styling compared to traditional CSS frameworks like Bootstrap or Materialize. This chapter will cover setting up Tailwind CSS, understanding its utility classes, building a responsive landing page, and deploying it to a hosting server using Git.

1. Introduction to Tailwind CSS

Tailwind CSS is a modern CSS framework that emphasizes utility classes over pre-built components. Unlike frameworks that provide high-level classes for elements like buttons, navigation bars, and alerts, Tailwind CSS offers a comprehensive set of low-level utility classes. These classes directly control CSS properties such as margin, padding, color, display, and more.

Utility Classes: In Tailwind CSS, utility classes are single-purpose CSS classes that directly map to CSS properties. They allow developers to style HTML elements by composing these classes directly in their markup, rather than writing custom CSS rules.

This approach allows for highly customized designs with minimal to no custom CSS. While it might initially seem like writing more classes in your HTML, it provides greater flexibility and control over your website’s appearance.

1.1. Tailwind CSS vs. Traditional CSS Frameworks

Traditional CSS frameworks often provide pre-designed components, which can be quick to implement but may limit customization. Tailwind CSS, on the other hand, provides the building blocks to create your own components and designs.

CSS Framework: A CSS framework is a library that provides pre-written CSS code to help developers quickly style web pages and applications. They typically include stylesheets for layout grids, typography, buttons, forms, and navigation, among other common UI patterns. Examples include Bootstrap, Foundation, and Materialize CSS.

Here’s a comparison:

• Traditional Frameworks (e.g., Bootstrap):

  • Offer pre-built components (buttons, navbars, cards).
  • Faster initial setup for common UI elements.
  • Less customization flexibility; often requires overriding default styles.
  • Can lead to larger CSS files as you include styles for components you may not use.

• Tailwind CSS:

  • Provides utility classes for granular control over styling.
  • Requires building components from scratch using utility classes.
  • Highly customizable and flexible.
  • Generates smaller CSS files in production as it only includes the utility classes you actually use.

1.2. Prerequisites

Before diving into Tailwind CSS, it’s highly recommended to have a solid understanding of core CSS concepts. Tailwind CSS is a tool to enhance and expedite your workflow, not a replacement for fundamental CSS knowledge. Understanding CSS principles will allow you to leverage Tailwind CSS more effectively and troubleshoot any styling issues.

Additionally, to set up Tailwind CSS using the command-line interface (CLI), you will need Node.js and npm (Node Package Manager) installed on your system.

Node.js: Node.js is a JavaScript runtime environment that allows you to run JavaScript code outside of a web browser. It is commonly used for server-side scripting and building command-line tools.

npm (Node Package Manager): npm is the default package manager for Node.js. It is used to install, manage, and share JavaScript packages and libraries.

2. Setting Up Tailwind CSS with the CLI

This section will guide you through setting up Tailwind CSS in your project using the CLI. This method is more robust and customizable compared to using a CDN (Content Delivery Network).

CLI (Command Line Interface): A command-line interface is a text-based interface used to interact with a computer operating system or application. Users type commands, and the system responds by executing them. In the context of Tailwind CSS, the CLI is used to compile and process Tailwind CSS files.

CDN (Content Delivery Network): A CDN is a geographically distributed network of servers that cache static content (like CSS, JavaScript, images) and deliver it to users based on their location. Using a CDN can improve website loading speed by serving content from servers closer to the user. However, for Tailwind CSS, using the CLI provides more control and customization than the CDN method.

2.1. Installing Node.js and npm

If you don’t have Node.js and npm installed, visit nodejs.org and download the appropriate installer for your operating system. Follow the installation instructions. npm is typically included with Node.js.

You can verify the installation by opening your terminal or command prompt and running the following commands:

node -v
npm -v

These commands should output the versions of Node.js and npm installed on your system.

2.2. Project Initialization

1. Create a Project Folder: Create a new folder for your project. You can do this through your operating system’s file explorer or using the command line:

   mkdir tailwind-website
   cd tailwind-website

2. Initialize package.json: Navigate to your project folder in the terminal and run the following command to initialize a package.json file:

   npm init -y

   package.json: A package.json file is a JSON file that is at the root of a Node.js project. It contains metadata about the project, such as its name, version, dependencies, and scripts. It’s used by npm to manage project dependencies and execute scripts.

   This command will create a package.json file with default settings in your project directory.

2.3. Installing Tailwind CSS

Install Tailwind CSS as a dev dependency using npm:

npm install -D tailwindcss

Dev Dependency: A dev dependency in npm is a package that is required for development and testing but not for running the application in production. Tailwind CSS is typically installed as a dev dependency because it is used to generate the final CSS file, which is then deployed.

This command will install Tailwind CSS and add it to the devDependencies section in your package.json file. It will also create a node_modules folder containing all the installed packages.

2.4. Initializing Tailwind Configuration

Run the following command to initialize Tailwind CSS and create a configuration file:

npx tailwindcss init

This command will generate a tailwind.config.js file in your project root.

tailwind.config.js: This file is the configuration file for Tailwind CSS. It allows you to customize Tailwind’s default settings, such as colors, fonts, breakpoints, and more. You can also configure which files Tailwind should scan for utility classes.

2.5. Configuring tailwind.config.js

Open tailwind.config.js in your text editor. By default, it will look something like this:

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

Modify the content array to specify the paths to your HTML files where you will be using Tailwind utility classes. For this project, as we are keeping HTML files in the root directory, update it as follows:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./*.html"], // Look for HTML files in the root directory
  theme: {
    extend: {
      // Customizations will be added here
      colors: {
        'bright-red': 'hsl(12, 88%, 59%)',
        'bright-red-light': 'hsl(12, 88%, 69%)',
        'bright-red-superlight': 'hsl(12, 88%, 95%)',
        'dark-blue': 'hsl(228, 39%, 23%)',
        'dark-grayish-blue': 'hsl(227, 12%, 61%)',
        'very-dark-blue': 'hsl(233, 12%, 13%)',
        'very-pale-red': 'hsl(13, 100%, 96%)',
        'very-light-gray': 'hsl(0, 0%, 98%)',
      },
      screens: {
        'sm': '480px',
        'md': '768px',
        'lg': '976px',
        'xl': '1440px',
      },
    },
  },
  plugins: [],
}

In this configuration, we have:

• content: Specifies that Tailwind should scan all HTML files in the root directory (./*.html) for utility classes.
• theme.extend.colors: Defines custom colors that can be used in your Tailwind project. These colors are named according to the project’s design requirements.
• theme.extend.screens: Defines custom screen sizes (breakpoints) for responsive design. These breakpoints (sm, md, lg, xl) are used to apply styles conditionally based on screen width.

Breakpoints: Breakpoints in responsive web design are specific screen widths at which the layout and styling of a website change to adapt to different devices. Tailwind CSS allows you to apply styles conditionally at these breakpoints using prefixes like sm:, md:, lg:, and xl:.

2.6. Creating input.css and Tailwind Layers

Create a new CSS file named input.css in your project root. Add the following Tailwind directives to this file:

@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind base, @tailwind components, @tailwind utilities: These are Tailwind directives that inject Tailwind’s base styles, component styles, and utility classes into your CSS file during the compilation process. They are essential for using Tailwind CSS.

• @tailwind base: Injects Tailwind’s base styles, which normalize and reset browser defaults.
• @tailwind components: Injects pre-built component styles (though Tailwind itself is utility-first and doesn’t have many components, this layer is for potential component-like styles or plugins).
• @tailwind utilities: Injects all of Tailwind’s utility classes.

You can add your custom CSS below these directives in input.css if needed.

2.7. Building and Watching CSS

1. Add Scripts to package.json: Open package.json and update the scripts section to include build and watch commands:

   "scripts": {
     "build": "tailwindcss -i ./input.css -o ./css/main.css",
     "watch": "tailwindcss -i ./input.css -o ./css/main.css --watch"
   },

   • build: This script compiles your input.css file into a production-ready main.css file in the ./css directory.
   • watch: This script does the same as build but also watches for changes in your HTML and CSS files and automatically recompiles the CSS whenever changes are detected. This is useful during development.

2. Create CSS Output Folder: Create a css folder in your project root. Tailwind CLI will output the compiled main.css file into this folder.

3. Run Build Script: To compile your CSS for the first time, run the build script:

   npm run build

   This will generate a main.css file inside the css folder. This file contains all the Tailwind utility classes and base styles, ready to be linked in your HTML.

   Static Stylesheet: A static stylesheet is a CSS file that is pre-compiled and served directly to the browser. In this case, main.css is the static stylesheet generated by Tailwind CLI, containing all the CSS rules derived from the utility classes used in your project.

4. Run Watch Script (for Development): For development, run the watch script:

   npm run watch

   This will start the Tailwind CSS watcher in the background. It will automatically recompile main.css whenever you make changes to your HTML or input.css file, providing a live development experience. Keep this script running in your terminal while you are developing your website.

3. Building the “Manage” Landing Page: Step-by-Step

Now that Tailwind CSS is set up, we can start building the “Manage” landing page. We will proceed section by section, utilizing Tailwind’s utility classes to style each element.

3.1. Navbar

<nav class="relative container mx-auto p-6">
    <div class="flex items-center justify-between">
        <!-- Logo -->
        <div class="pt-2">
            <img src="images/logo.svg" alt="Manage Logo">
        </div>
        <!-- Menu Items -->
        <div class="hidden md:flex space-x-6">
            <a href="#" class="hover:text-dark-grayish-blue">Pricing</a>
            <a href="#" class="hover:text-dark-grayish-blue">Product</a>
            <a href="#" class="hover:text-dark-grayish-blue">About Us</a>
            <a href="#" class="hover:text-dark-grayish-blue">Careers</a>
            <a href="#" class="hover:text-dark-grayish-blue">Community</a>
        </div>
        <!-- Button -->
        <a href="#" class="hidden md:block p-3 px-6 pt-2 text-white bg-bright-red rounded-full baseline hover:bg-bright-red-light">
            Get Started
        </a>
        <!-- Hamburger Icon -->
        <button id="menu-btn" class="block hamburger md:hidden focus:outline-none">
            <span class="hamburger-top"></span>
            <span class="hamburger-middle"></span>
            <span class="hamburger-bottom"></span>
        </button>
    </div>
    <!-- Mobile Menu -->
    <div class="md:hidden">
        <div id="menu" class="absolute flex flex-col items-center hidden self-end py-8 mt-10 space-y-6 font-bold bg-white sm:w-auto sm:self-center left-6 right-6 drop-shadow-md">
            <a href="#">Pricing</a>
            <a href="#">Product</a>
            <a href="#">About Us</a>
            <a href="#">Careers</a>
            <a href="#">Community</a>
        </div>
    </div>
</nav>

Utility Classes Used in Navbar:

• relative: Sets the navigation container to position: relative; - necessary for absolute positioning of the mobile menu.
• container: Applies predefined width constraints based on screen sizes, ensuring content stays within reasonable bounds on different devices.
• mx-auto: Sets margin-left: auto; and margin-right: auto; to center the container horizontally.
• p-6: Applies padding of 1.5rem (24px) on all sides (padding: 1.5rem;).
• flex: Sets the container to display: flex;, enabling flexbox layout.
• items-center: Vertically aligns items to the center within the flex container (align-items: center;).
• justify-between: Distributes space evenly between items, pushing the first and last items to the edges (justify-content: space-between;).
• pt-2: Applies padding-top of 0.5rem (8px) (padding-top: 0.5rem;) to the logo div.
• hidden md:flex: Hides the menu items on small screens (hidden) and displays them as a flex container on medium screens and up (md:flex).
• space-x-6: Adds horizontal spacing of 1.5rem (24px) between menu items (space-x: 1.5rem;).
• hover:text-dark-grayish-blue: Changes the text color to dark-grayish-blue on hover.
• hidden md:block: Hides the button on small screens (hidden) and displays it as a block element on medium screens and up (md:block).
• p-3 px-6 pt-2: Applies custom padding values (padding: 0.75rem, padding-left/right: 1.5rem, padding-top: 0.5rem).
• text-white: Sets text color to white (color: #fff;).
• bg-bright-red: Sets background color to the custom bright-red color defined in tailwind.config.js.
• rounded-full: Applies full border-radius, creating a pill-shaped button (border-radius: 9999px;).
• baseline: Aligns the button text to the baseline.
• hover:bg-bright-red-light: Changes the background color to bright-red-light on hover.
• block hamburger md:hidden focus:outline-none: Styles the hamburger button:
  • block: Makes it a block-level element.
  • hamburger: Custom class for hamburger menu styling (defined in input.css).
  • md:hidden: Hides it on medium screens and up.
  • focus:outline-none: Removes default focus outline.
• hamburger-top, hamburger-middle, hamburger-bottom: Custom classes for styling the lines of the hamburger icon (defined in input.css).
• md:hidden: Hides the mobile menu on medium screens and up.
• absolute: Positions the mobile menu absolutely relative to the nearest positioned ancestor (the nav element with relative).
• flex flex-col items-center: Styles the mobile menu container as a flex column, centering items horizontally.
• self-end: Aligns the mobile menu to the end of its container along the cross axis.
• py-8 mt-10 space-y-6 font-bold bg-white: Styles the mobile menu:
  • py-8: Vertical padding of 2rem (32px).
  • mt-10: Margin-top of 2.5rem (40px).
  • space-y-6: Vertical spacing of 1.5rem (24px) between menu items.
  • font-bold: Sets font weight to bold.
  • bg-white: White background.
• sm:w-auto sm:self-center left-6 right-6 drop-shadow-md: Responsive styling for mobile menu on small screens and up:
  • sm:w-auto: Sets width to auto on small screens and up.
  • sm:self-center: Centers the menu horizontally on small screens and up.
  • left-6 right-6: Sets left and right margins of 1.5rem (24px).
  • drop-shadow-md: Adds a medium drop shadow.

3.2. Hero Section

<section id="hero">
    <div class="container flex flex-col-reverse align-item-center px-6 mx-auto mt-10 space-y-0 md:space-y-0 md:flex-row">
        <!-- Left Item -->
        <div class="flex flex-col mb-32 space-y-12 md:w-1/2">
            <h1 class="max-w-md text-4xl font-bold text-center md:text-5xl md:text-left">
                Bring everyone together to build better products
            </h1>
            <p class="max-w-sm text-center text-dark-grayish-blue md:text-left">
                Manage makes it simple for software teams to plan day-to-day
                tasks while keeping the larger team goals in view.
            </p>
            <div class="flex justify-center md:justify-start">
                <a href="#" class="p-3 px-6 pt-2 text-white bg-bright-red rounded-full baseline hover:bg-bright-red-light">
                    Get Started
                </a>
            </div>
        </div>
        <!-- Image -->
        <div class="md:w-1/2">
            <img src="images/illustration-intro.svg" alt="Illustration Intro">
        </div>
    </div>
</section>

Utility Classes Used in Hero Section:

• flex flex-col-reverse: Sets the container as a flex column, reversing the order of items (image on top on small screens).
• align-item-center: Vertically aligns items to the center (though items-center is more common, align-item-center might be a typo and should likely be items-center).
• px-6 mx-auto mt-10 space-y-0 md:space-y-0: Container spacing and margins:
  • px-6: Horizontal padding of 1.5rem (24px).
  • mx-auto: Centers horizontally.
  • mt-10: Margin-top of 2.5rem (40px).
  • space-y-0 md:space-y-0: Removes vertical spacing between flex items.
• md:flex-row: Changes to a flex row layout on medium screens and up.
• flex flex-col mb-32 space-y-12 md:w-1/2: Left item styling:
  • flex flex-col: Flex column layout.
  • mb-32: Margin-bottom of 8rem (128px).
  • space-y-12: Vertical spacing of 3rem (48px) between elements within the left item.
  • md:w-1/2: Sets width to 50% on medium screens and up.
• max-w-md text-4xl font-bold text-center md:text-5xl md:text-left: Heading styling:
  • max-w-md: Maximum width of medium breakpoint (768px).
  • text-4xl: Text size of 2.25rem (36px).
  • font-bold: Bold font weight.
  • text-center: Centers text horizontally.
  • md:text-5xl: Text size of 3rem (48px) on medium screens and up.
  • md:text-left: Aligns text to the left on medium screens and up.
• max-w-sm text-center text-dark-grayish-blue md:text-left: Paragraph styling:
  • max-w-sm: Maximum width of small breakpoint (480px).
  • text-center: Centers text horizontally.
  • text-dark-grayish-blue: Sets text color to dark-grayish-blue.
  • md:text-left: Aligns text to the left on medium screens and up.
• flex justify-center md:justify-start: Button container:
  • flex: Flex layout.
  • justify-center: Centers content horizontally.
  • md:justify-start: Aligns content to the start (left) on medium screens and up.
• md:w-1/2: Image container:
  • md:w-1/2: Sets width to 50% on medium screens and up.

3.3. Features Section

<section id="features">
    <div class="container flex flex-col px-4 mx-auto mt-10 space-y-12 md:space-y-0 md:flex-row">
        <!-- What's Different -->
        <div class="flex flex-col space-y-12 md:w-1/2">
            <h2 class="max-w-md text-4xl font-bold text-center md:text-left">
                What's different about Manage?
            </h2>
            <p class="max-w-sm text-center text-dark-grayish-blue md:text-left">
                Manage provides all the functionality your team needs, without
                the complexity. Our software is tailor-made for modern digital
                product teams.
            </p>
        </div>
        <!-- Numbered List -->
        <div class="flex flex-col space-y-8 md:w-1/2">
            <!-- List Item 1 -->
            <div class="flex flex-col space-y-3 md:space-y-0 md:space-x-6 md:flex-row">
                <!-- Heading -->
                <div class="rounded-l-full bg-bright-red-superlight md:bg-transparent">
                    <div class="flex items-center space-x-2">
                        <div class="px-4 py-2 text-white rounded-full md:py-1 bg-bright-red">01</div>
                        <h3 class="text-base font-bold md:mb-4 md:hidden">
                            Track company-wide progress
                        </h3>
                    </div>
                </div>
                <div>
                    <h3 class="hidden mb-4 text-lg font-bold md:block">
                        Track company-wide progress
                    </h3>
                    <p class="text-dark-grayish-blue">
                        See how your day-to-day tasks fit into the wider vision.
                        Go straight to task level, and make real-time adjustments.
                        No more paper tracking.
                    </p>
                </div>
            </div>
            <!-- List Item 2 -->
            <div class="flex flex-col space-y-3 md:space-y-0 md:space-x-6 md:flex-row">
                <!-- Heading -->
                <div class="rounded-l-full bg-bright-red-superlight md:bg-transparent">
                    <div class="flex items-center space-x-2">
                        <div class="px-4 py-2 text-white rounded-full md:py-1 bg-bright-red">02</div>
                        <h3 class="text-base font-bold md:mb-4 md:hidden">
                            Advanced built-in reports
                        </h3>
                    </div>
                </div>
                <div>
                    <h3 class="hidden mb-4 text-lg font-bold md:block">
                        Advanced built-in reports
                    </h3>
                    <p class="text-dark-grayish-blue">
                        Set internal delivery estimates and track progress toward
                        company goals. Our customisable dashboard helps you build
                        out the reports you need to keep key stakeholders informed.
                    </p>
                </div>
            </div>
            <!-- List Item 3 -->
            <div class="flex flex-col space-y-3 md:space-y-0 md:space-x-6 md:flex-row">
                <!-- Heading -->
                <div class="rounded-l-full bg-bright-red-superlight md:bg-transparent">
                    <div class="flex items-center space-x-2">
                        <div class="px-4 py-2 text-white rounded-full md:py-1 bg-bright-red">03</div>
                        <h3 class="text-base font-bold md:mb-4 md:hidden">
                            Everything you need in one place
                        </h3>
                    </div>
                </div>
                <div>
                    <h3 class="hidden mb-4 text-lg font-bold md:block">
                        Everything you need in one place
                    </h3>
                    <p class="text-dark-grayish-blue">
                        Stop jumping from one service to another to communicate,
                        store files, track tasks and share documents. Manage offers
                        an all-in-one team productivity solution.
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

Utility Classes Used in Features Section:

• container flex flex-col px-4 mx-auto mt-10 space-y-12 md:space-y-0 md:flex-row: Section container:
  • container: Width constraints.
  • flex flex-col: Flex column layout.
  • px-4: Horizontal padding of 1rem (16px).
  • mx-auto: Centers horizontally.
  • mt-10: Margin-top of 2.5rem (40px).
  • space-y-12 md:space-y-0: Vertical spacing of 3rem (48px) between flex items on small screens, removed on medium screens and up.
  • md:flex-row: Flex row layout on medium screens and up.
• flex flex-col space-y-12 md:w-1/2: “What’s Different” section:
  • flex flex-col: Flex column layout.
  • space-y-12: Vertical spacing of 3rem (48px) between elements.
  • md:w-1/2: Sets width to 50% on medium screens and up.
• max-w-md text-4xl font-bold text-center md:text-left: Section heading:
  • max-w-md, text-4xl, font-bold, text-center, md:text-left: Same as Hero section heading.
• max-w-sm text-center text-dark-grayish-blue md:text-left: Section paragraph:
  • max-w-sm, text-center, text-dark-grayish-blue, md:text-left: Same as Hero section paragraph.
• flex flex-col space-y-8 md:w-1/2: Numbered list section:
  • flex flex-col: Flex column layout.
  • space-y-8: Vertical spacing of 2rem (32px) between list items.
  • md:w-1/2: Sets width to 50% on medium screens and up.
• flex flex-col space-y-3 md:space-y-0 md:space-x-6 md:flex-row: List item container:
  • flex flex-col: Flex column layout.
  • space-y-3: Vertical spacing of 0.75rem (12px) between elements within the list item on small screens.
  • md:space-y-0 md:space-x-6 md:flex-row: Removes vertical spacing, adds horizontal spacing of 1.5rem (24px), and changes to flex row layout on medium screens and up.
• rounded-l-full bg-bright-red-superlight md:bg-transparent: Number container (with background):
  • rounded-l-full: Rounded left side.
  • bg-bright-red-superlight: Background color for small screens.
  • md:bg-transparent: Transparent background on medium screens and up.
• flex items-center space-x-2: Number and hidden heading container:
  • flex items-center: Flex layout, vertically centered items.
  • space-x-2: Horizontal spacing of 0.5rem (8px).
• px-4 py-2 text-white rounded-full md:py-1 bg-bright-red: Number styling:
  • px-4 py-2: Padding (horizontal: 1rem, vertical: 0.5rem).
  • text-white: White text color.
  • rounded-full: Rounded shape.
  • md:py-1: Reduced vertical padding on medium screens and up.
  • bg-bright-red: Background color.
• text-base font-bold md:mb-4 md:hidden: Heading visible on small screens:
  • text-base: Base text size.
  • font-bold: Bold font weight.
  • md:mb-4: Margin-bottom on medium screens and up.
  • md:hidden: Hidden on medium screens and up (because a different heading is shown).
• hidden mb-4 text-lg font-bold md:block: Heading visible on medium screens and up:
  • hidden: Hidden on small screens.
  • mb-4: Margin-bottom.
  • text-lg: Larger text size.
  • font-bold: Bold font weight.
  • md:block: Block display on medium screens and up.
• text-dark-grayish-blue: Paragraph text color.

(The code for Testimonials, CTA Section, and Footer sections follows a similar pattern of utility class usage. For brevity, a detailed breakdown of each class in those sections will be omitted here, but the same principles of utility-first styling apply. The full code for these sections is available in the original transcript.)

3.4. Responsiveness and Breakpoints

Tailwind CSS makes responsive design straightforward using breakpoint prefixes. As seen throughout the code, prefixes like sm:, md:, lg:, and xl: are used to apply styles conditionally at different screen sizes.

Responsive Design: Responsive web design is an approach to web design that aims to make web pages render well on a variety of devices and screen sizes, from desktop monitors to mobile phones.

• Mobile-First Approach: Tailwind CSS encourages a mobile-first approach. Styles without prefixes are applied by default to all screen sizes (starting with mobile). Breakpoint prefixes are then used to override these default styles for larger screens.

  Mobile-First Design: Mobile-first design is a design philosophy and approach where you start designing and developing for mobile devices first and then progressively enhance the design for larger screens like tablets and desktops. This approach ensures a good user experience on smaller screens and scalability to larger ones.

• Customizing Breakpoints: The breakpoints (sm, md, lg, xl) are defined in tailwind.config.js under the theme.extend.screens section. You can customize these breakpoints to match your project’s specific design requirements.

• Common Responsive Utility Classes: Classes like flex-col, flex-row, hidden, block, text-center, text-left, w-1/2, w-1/3, space-x-*, space-y-*, etc., are frequently used with breakpoint prefixes to create responsive layouts.

3.5. Adding Hamburger Menu Functionality (JavaScript)

To make the hamburger menu interactive, a small amount of JavaScript is used to toggle the visibility of the mobile menu and animate the hamburger icon.

const btn = document.getElementById('menu-btn');
const nav = document.getElementById('menu');

btn.addEventListener('click', () => {
    btn.classList.toggle('open');
    nav.classList.toggle('flex');
    nav.classList.toggle('hidden');
});

This JavaScript code:

1. Selects Elements: Gets references to the hamburger button (menu-btn) and the mobile menu (menu) using their IDs.
2. Adds Event Listener: Attaches a click event listener to the hamburger button.
3. Toggles Classes: When the button is clicked, it toggles the following classes on both the button and the menu:
   • open class on the button: This class, defined in input.css, animates the hamburger icon into an “X”.
   • flex and hidden classes on the menu: This toggles the display of the menu between flex (visible) and hidden (invisible).

3.6. Custom CSS for Hamburger Menu and Backgrounds (input.css)

The input.css file is used to add custom styles, including the background SVGs and the CSS for the hamburger menu animation.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    body {
        background-image: url('../images/bg-tablet-pattern.svg');
        background-repeat: no-repeat;
        background-size: 800px;
        background-position: 90% -25%;
    }

    #cta {
        background-image: url('../images/bg-simplify-section-desktop.svg');
        background-repeat: no-repeat;
    }

    @media (max-width: 576px) {
        body {
            background-position: 50px -50px;
            background-size: 500px;
        }

        #cta {
            background-image: url('../images/bg-simplify-section-mobile.svg');
        }
    }

    .hamburger {
        cursor: pointer;
        width: 24px;
        height: 24px;
        transition: all 0.25s ease;
        position: relative;
    }

    .hamburger-top,
    .hamburger-middle,
    .hamburger-bottom {
        position: absolute;
        top: 0;
        left: 0;
        width: 24px;
        height: 2px;
        background: black;
        transform: rotate(0);
        transition: all 0.5s ease;
    }

    .hamburger-middle {
        transform: translateY(7px);
    }

    .hamburger-bottom {
        transform: translateY(14px);
    }

    .open {
        transform: rotate(90deg);
        transform: translateY(0px);
    }

    .open .hamburger-top {
        transform: rotate(45deg) translateY(6px) translateZ(0);
    }

    .open .hamburger-middle {
        display: none;
    }

    .open .hamburger-bottom {
        transform: rotate(-45deg) translateY(-6px) translateZ(0);
    }
}

This CSS code:

• Adds Background Images: Sets background images for the body and #cta sections using background-image, background-repeat, background-size, and background-position properties. Media queries are used to adjust background positioning and size for smaller screens and to use a mobile-specific CTA background image.
• Styles Hamburger Icon: Defines styles for the .hamburger button and its lines (.hamburger-top, .hamburger-middle, .hamburger-bottom) to create the hamburger icon and its animation to an “X” when the .open class is applied. Transitions are used to create smooth animations.

4. Deployment to InMotion Hosting using Git

This section outlines how to deploy the Tailwind CSS website to InMotion Hosting using Git. This method is efficient for updating your website in the future.

Git: Git is a distributed version control system that tracks changes in computer files and coordinates work on those files among multiple people. It’s primarily used for source code management in software development.

GitHub: GitHub is a web-based platform and service for version control using Git. It offers collaboration features, issue tracking, and more, making it a popular choice for hosting and managing Git repositories.

Repository: In Git, a repository (often shortened to “repo”) is a storage location for all the files and revision history of a project. It can be local (on your computer) or remote (hosted on a server like GitHub).

4.1. Prerequisites for Deployment

• InMotion Hosting Account: You need an active hosting account with InMotion Hosting. This can be a shared hosting, VPS, or dedicated server account.
• cPanel Access: Ensure you have access to your hosting account’s cPanel (control panel).
• Git Installed Locally: Git should be installed on your local development machine.
• GitHub Account: You need a GitHub account to host your project repository.

cPanel: cPanel is a web hosting control panel that provides a graphical interface and automation tools designed to simplify the process of hosting a website. It allows users to manage various aspects of their hosting account, including files, databases, email accounts, and more.

VPS (Virtual Private Server): A VPS is a virtual machine that provides dedicated resources (like CPU, RAM, and storage) within a larger physical server. It offers more control and resources than shared hosting but is less expensive than a dedicated server.

Dedicated Server: A dedicated server is a physical server dedicated entirely to a single user or organization. It provides the highest level of performance, control, and security but is also the most expensive hosting option.

Shared Hosting: Shared hosting is a type of web hosting where multiple websites are hosted on a single web server. It’s the most affordable hosting option but resources are shared among all websites on the server.

4.2. Creating a GitHub Repository

1. Initialize Git Repository Locally: If you haven’t already, initialize a Git repository in your project directory:

   git init

2. Create .gitignore File: Create a .gitignore file in your project root and add node_modules/ to it. This prevents the node_modules folder from being included in your repository.

   .gitignore: A .gitignore file is a text file in the root directory of a Git repository. It specifies intentionally untracked files that Git should ignore. This is useful for excluding files that are not necessary for version control, such as dependencies or temporary files.

3. Add and Commit Files: Stage and commit your project files:

   git add .
   git commit -m "Initial commit"

4. Create Repository on GitHub: Go to github.com and create a new repository. Name it appropriately (e.g., tailwind-landing-page).

5. Link Local Repository to GitHub: Copy the repository URL from GitHub (HTTPS URL). In your terminal, add the remote repository and push your local commits:

   git remote add origin <YOUR_GITHUB_REPOSITORY_URL>
   git branch -M main
   git push -u origin main

   Replace <YOUR_GITHUB_REPOSITORY_URL> with the actual URL of your GitHub repository.

4.3. Deploying from cPanel using Git Version Control

1. Access cPanel: Log in to your InMotion Hosting cPanel.

2. Navigate to Git Version Control: Find the “Git Version Control” icon under the “Files” section in cPanel and click on it.

3. Create a Repository: Click the “Create” button.

4. Clone URL: In the “Clone URL” field, paste the HTTPS URL of your GitHub repository.

5. Repository Path: In the “Repository Path” field, specify the path where you want to clone the repository on your server. To deploy to the root directory of your website (accessible via your domain), enter public_html.

6. Create Repository: Click the “Create Repository” button. cPanel will clone your GitHub repository to the specified path on your server.

7. Access Your Website: Once the cloning process is complete, your website should be deployed. Access your domain in a web browser to view the live website.

4.4. Updating Your Website

To update your website after making changes locally:

1. Commit and Push Changes: After making changes to your local project, commit and push them to your GitHub repository:

   git add .
   git commit -m "Your commit message"
   git push origin main

2. Pull Changes in cPanel: In cPanel’s “Git Version Control” interface, locate your repository and click the “Pull” button. This will fetch the latest changes from your GitHub repository and update your website on the server.

5. Conclusion

This chapter has provided a comprehensive guide to building and deploying a website using Tailwind CSS and Git. By utilizing Tailwind CSS’s utility-first approach, you can create highly customized and responsive websites efficiently. Deploying with Git simplifies the process of making your website live and managing updates. This workflow provides a solid foundation for building modern web projects.