HTML/CSS Project with Tailwind CSS

This project is a static website built using HTML and CSS, with Tailwind CSS used for styling. Tailwind CSS is a utility-first CSS framework that makes it easy to build custom designs without having to leave your HTML.

Table of Contents

• Features
• Tech Stack
• Installation
• Usage
• Development
• Deployment
• Screenshot
• Contact

Features

• Tailwind CSS: Utility-first CSS framework for rapid UI development.
• Responsive Design: Ensures the website looks good on all devices.
• Customizable: Easily adjust styles using Tailwind’s utility classes.

Tech Stack

• HTML: Markup language for creating web pages.
• CSS: Stylesheet language used for styling the HTML content.
• Tailwind CSS: Utility-first CSS framework.

Installation

To get started with this project, follow these steps:

1. Clone the repository:

   [git clone https://github.com/Midhun-live/Tailwind.git
   

2. Navigate to the project directory:

   cd tailwind
   

3. Install Tailwind CSS as a development dependency:

   npm install -D tailwindcss
   

4. Initialize Tailwind CSS:

   ```bash npx tailwindcss init --full

This will create a tailwind.config.js file with default configurations.

5. Set Up Your CSS File: Create a src/styles.css file and add the following content to import Tailwind’s base, components, and utilities:

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

6. Build your CSS: Build the Tailwind CSS file and output it to public/styles.css:

   ```bash npx tailwindcss build src/styles.css -o public/styles.css

Usage

• Development: Use the commands above to build your Tailwind CSS file. Include the output CSS file (public/styles.css) in your HTML file(s).

• HTML: Reference the built CSS file in your HTML:

  <link href="public/styles.css" rel="stylesheet">
  

• Adding Tailwind Classes: Utilize Tailwind CSS utility classes directly in your HTML to style your elements.

Development

• To rebuild your CSS whenever changes are made, you can run the Tailwind CSS build command:

  ```bash npx tailwindcss build src/styles.css -o public/styles.css

For a more streamlined development process, you might consider using a build tool like PostCSS to automatically process Tailwind CSS.

Deployment

Deploy to Vercel:

• Push Your Code to GitHub:

  • Ensure your code is pushed to a GitHub repository.

    ```bash git add . git commit -m "Prepare project for deployment" git push origin main

• Deploy to Vercel:

  • Go to Vercel and sign in or create an account.
  • Click on "New Project" and import your GitHub repository.
  • Click "Deploy" and wait for Vercel to build and deploy your project.

• View Your Live Site:

  • Once deployed, Vercel will provide you with a live URL where you can view your application. You can find this URL in the Vercel dashboard under your project.

Screenshot

Contact

• Email: midhunchakkaravarthy07@gmail.com
• GitHub: Midhun-live
• LinkedIn: LinkedIn Profile
• Website: Olypic Medal Table