Twitter UI Clone

This project is a responsive clone of the Twitter user interface, created using Tailwind CSS. It demonstrates the use of Tailwind for rapid UI development, focusing on clean, maintainable, and customizable design.

Features

• Fully responsive layout.
• Replicates the Twitter UI design.
• Built with Tailwind CSS for flexibility and customization.
• Easy to extend and adapt for additional features.

Prerequisites

Ensure you have the following installed before setting up the project:

• Node.js (version 14 or above)
• npm (Node Package Manager)

Installation

Follow these steps to set up the project locally:

1. Clone the repository:

   git clone <repository-url>
   cd twitter-ui-clone
   

2. Initialize the project:

   npm init -y
   

3. Install Tailwind CSS as a development dependency:

   npm install -D tailwindcss
   

4. Initialize the Tailwind CSS configuration:

   npx tailwindcss init
   

Configuration

1. Open the file and specify the paths to your HTML files:

   module.exports = {
     content: ["./*.html"],
     theme: {
       extend: {},
     },
     plugins: [],
   };
   

2. Create a CSS file (css/input.css) and include Tailwind directives:

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

3. Add a build command in under scripts:

   "scripts": {
     "build": "npx tailwindcss -i ./css/input.css -o ./css/output.css --watch"
   }
   

Usage

1. Run the Tailwind build process:

   npm run build
   

2. Include the generated file in your :

   <link href="css/output.css" rel="stylesheet">
   

3. Open in your browser to view the Twitter UI clone.

Hosted link

https://mytwitterclone.freewebhostmost.com/

Project Structure

twitter-ui-clone/
│
├── css/
│   ├── input.css
│   ├── output.css
│
├── index.html
│
├── package.json
│
├── tailwind.config.js
│
<<<<<<< HEAD
└── node_modules/
=======
└── node_modules/
>>>>>>> 3936a5285fd0d0b9c066b47e53bfdf703f81691c