init new project

Signed-off-by: Timi <treasurealekhojie@yahoo.com>

Author: creative-tutorials

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -0,0 +1,77 @@
+# HTML Tailwind
+
+## Overview
+
+**HTML Tailwind** is a simple boilerplate designed to help you quickly set up a project using HTML and Tailwind CSS. Whether you're a seasoned developer or just starting out, this boilerplate provides a streamlined foundation, allowing you to focus on building your application without the hassle of initial configuration.
+
+## Features
+
+- **Quick Setup**: Get started in minutes with a pre-configured structure.
+- **Tailwind CSS Integration**: Utilize the power of Tailwind CSS for rapid UI development.
+- **Responsive Design**: Built-in responsiveness to ensure your project looks great on all devices.
+- **Customizable**: Easily modify the configuration to suit your project needs.
+
+## Getting Started
+
+Follow these steps to set up your HTML Tailwind project:
+
+### Prerequisites
+
+- [Node.js](https://nodejs.org/) (version 14 or higher)
+- A code editor (such as [Visual Studio Code](https://code.visualstudio.com/))
+
+### Installation
+
+1. **Clone the repository**:
+
+   ```bash
+   git clone https://github.com/creative-tutorials/html-tailwind.git
+   cd html-tailwind
+   ```
+
+2. **Install dependencies**:
+
+   ```bash
+   pnpm install
+   ```
+
+3. **Start the development server**:
+
+   ```bash
+   pnpm run dev
+   ```
+
+4. **Open your browser** and navigate to `http://localhost:4000` to see your project in action!
+
+## Usage
+
+You can start editing the `index.html` file to customize your project. Tailwind CSS classes can be added directly to your HTML elements to style them as needed. For more information on using Tailwind CSS, check out the [Tailwind CSS Documentation](https://tailwindcss.com/docs).
+
+## Customization
+
+To customize your Tailwind configuration, edit the `tailwind.config.js` file.
+
+## Contributing
+
+Contributions are welcome! If you have suggestions for improvements or want to add features. To get started, fork the repository and submit a pull request.
+
+### Steps to Contribute
+
+1. Fork the repository.
+2. Create a new branch (`git checkout -b feature/YourFeature`).
+3. Make your changes and commit them (`git commit -m 'Add some feature'`).
+4. Push to the branch (`git push origin feature/YourFeature`).
+5. Open a pull request.
+
+## License
+
+This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
+
+## Acknowledgments
+
+- [Tailwind CSS](https://tailwindcss.com/) for providing an amazing utility-first CSS framework.
+- [HTML5](https://www.w3.org/TR/html52/) for a solid foundation for web development.
+
+## Contact
+
+For questions or feedback, feel free to reach out via [GitHub Issues](https://github.com/creative-tutorials/html-tailwind/issues) or directly at [hellotimi](mailto:hellotimi@proton.me)

bs-config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  proxy: "http://localhost:5300", // Your server's address
+  files: ["src/**/*.html", "src/**/*.css"], // Files to watch
+  port: 4000, // Port for Browser-Sync
+  reloadDelay: 500, // Delay to ensure the server restarts before reloading
+  open: false, // Prevents Browser-Sync from opening a new tab on start
+};

lib/utils.mjs

@@ -0,0 +1,6 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}

main.mjs

@@ -0,0 +1,80 @@
+import { createServer } from "node:http";
+import { readFile, stat } from "node:fs";
+import { join, dirname, extname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+// Get the current directory name
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Define the path to the index.html file
+const filePath = join(__dirname, "src", "index.html");
+
+// Create the server
+const server = createServer((req, res) => {
+  // Handle requests for the root path
+  if (req.url === "/") {
+    readFile(filePath, (err, data) => {
+      if (err) {
+        res.writeHead(500, { "Content-Type": "text/plain" });
+        res.end("Internal Server Error");
+      } else {
+        res.writeHead(200, { "Content-Type": "text/html" });
+        res.end(data);
+      }
+    });
+  } else {
+    // Serve static files (like CSS)
+    const fileUrl = join(__dirname, "src", req.url);
+    stat(fileUrl, (err) => {
+      if (err) {
+        // If the file doesn't exist, send a 404 Not Found response
+        res.writeHead(404, { "Content-Type": "text/plain" });
+        res.end("Not Found");
+      } else {
+        // Read the requested file
+        readFile(fileUrl, (err, data) => {
+          if (err) {
+            res.writeHead(500, { "Content-Type": "text/plain" });
+            res.end("Internal Server Error");
+          } else {
+            // Determine the content type based on the file extension
+            const ext = extname(req.url);
+            let contentType = "text/plain";
+            switch (ext) {
+              case ".css":
+                contentType = "text/css";
+                break;
+              case ".js":
+                contentType = "application/javascript";
+                break;
+              case ".png":
+                contentType = "image/png";
+                break;
+              case ".jpg":
+                contentType = "image/jpeg";
+                break;
+              case ".gif":
+                contentType = "image/gif";
+                break;
+              case ".svg":
+                contentType = "image/svg+xml";
+                break;
+              case ".html":
+                contentType = "text/html";
+                break;
+            }
+            // Send the file contents with a 200 OK status
+            res.writeHead(200, { "Content-Type": contentType });
+            res.end(data);
+          }
+        });
+      }
+    });
+  }
+});
+
+// Start the server on port 5300
+server.listen(5300, () => {
+  console.log("Server is running on http://localhost:5300");
+});

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "html-tailwind",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "concurrently \"pnpm run build\" \"pnpm run serve\" \"pnpm run sync\"",
+    "serve": "nodemon main.mjs",
+    "sync": "browser-sync start --config bs-config.js",
+    "build": "tailwindcss -i ./src/styles.css -o ./src/output.css --watch"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "autoprefixer": "^10.4.20",
+    "browser-sync": "^3.0.2",
+    "concurrently": "^8.2.2",
+    "nodemon": "^3.1.4",
+    "postcss": "^8.4.41",
+    "postcss-cli": "^11.0.0",
+    "tailwindcss": "^3.4.7"
+  },
+  "dependencies": {
+    "@radix-ui/react-icons": "^1.3.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.424.0",
+    "tailwind-merge": "^2.4.0",
+    "tailwindcss-animate": "^1.0.7"
+  }
+}