TailwindCSS Mini Project: Home Page

This project demonstrates a simple home page designed entirely using TailwindCSS. No additional CSS files are included; all styling is achieved with utility classes provided by TailwindCSS.

Project Features

• Fully responsive design.
• Built entirely with TailwindCSS utility classes.
• Minimal and clean layout for a home page.

Getting Started

Prerequisites

Ensure you have the following installed on your system:

• Node.js (v14 or newer)
• npm or yarn

Installation

1. Clone the repository:

   git clone [email protected]:Youssefait-sy/Tailwindscss-Mini-Project.git
   

2. Navigate to the project directory:

   cd Tailwindscss-Mini-Project
   

3. Install dependencies:

   npm install
   

4. Start the development server:

   npm run dev
   

Build for Production

To generate a production-ready build, run:

npm run build

Project Structure

Tailwindscss-Mini-Project/
├── public/          # Static assets (e.g., images)
├── src/
│   ├── index.html   # Main HTML file
│   ├── main.js      # JavaScript entry point
├── tailwind.config.js # TailwindCSS configuration
├── package.json     # Project dependencies
└── README.md        # Project documentation

Screenshots

Technologies Used

• TailwindCSS: For styling the entire project.
• HTML5: For semantic structure.
• JavaScript: For any interactive elements (optional).

How It Works

This project uses TailwindCSS's utility-first approach, where all styling is done by adding pre-defined classes directly to the HTML elements. No separate CSS files are required.

Example Code Snippet

<div class="flex items-center justify-center h-screen bg-gray-100">
  <h1 class="text-4xl font-bold text-blue-600">Welcome to My Home Page!</h1>
</div>

Author

• Youssefait-sy
  GitHub Profile

License

This project is licensed under the MIT License.

Feel free to contribute, suggest improvements, or use this project as a base for your own TailwindCSS experiments!