mehrabix/vinxi-lit-tailwind-boilerplate

# Vinxi Lit App Boilerplate

This boilerplate provides a solid foundation for building web applications using **Lit.js**, **TailwindCSS**, and **Vite**. It is designed for easy setup and development, leveraging modern web standards and tools.

## Features

- **Modern Framework**: Built with [Lit.js](https://lit.dev/) for building web components.
- **TailwindCSS**: Utility-first CSS framework for rapid UI development.
- **Vite**: Fast development server and build tool.
- **TypeScript**: Type safety for better development experience.
- **Concurrently**: Run multiple commands in parallel for streamlined development.

## Getting Started

### Prerequisites

- **Node.js**: Ensure you have Node.js installed. You can download it from [nodejs.org](https://nodejs.org/).
- **pnpm**: A fast and disk space-efficient package manager. Install it using:

  ```bash
  npm install -g pnpm

Installation

1. Clone the repository:

   git clone https://github.com/mehrabix/vinxi-lit-tailwind-boilerplate
   cd vinxi-lit-tailwind-boilerplate

2. Install the dependencies:

   pnpm install

Directory Structure

vinxi-lit-app/
├── output/              # Compiled output for TailwindCSS and JavaScript
├── src/                 # Source files
│   ├── app.ts           # Main application entry point
│   └── components/      # Custom Lit components
├── tailwindlib.css      # TailwindCSS input file
├── vite.config.ts       # Vite configuration
├── package.json         # Project metadata and scripts
└── README.md            # Project documentation

Scripts

Command	Description
pnpm start	Start the development server and watch files.
pnpm dev	Run the application in development mode.
pnpm build	Build the application for production.
pnpm serve	Serve the built application.

Development

To start the development server, run:

pnpm start

This command uses concurrently to watch for changes in both TailwindCSS and your Lit components. The server will be accessible at http://localhost:3000/.

TailwindCSS Configuration

Ensure that your tailwind.config.js is set up to include your source files:

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{ts,tsx,js,jsx,html}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Adding Components

1. Create a new file for your component in the src/components/ directory.

2. Import and define your component using Lit.js:

   import { LitElement, html, css } from 'lit';
   
   class MyComponent extends LitElement {
     static styles = css`
       /* Your styles here */
     `;
   
     render() {
       return html`
         <h1>Hello, Lit!</h1>
       `;
     }
   }
   
   customElements.define('my-component', MyComponent);

Handling Styles with Shadow DOM

If you're using Shadow DOM, you can utilize the lit-element-style or lit-element-global-style libraries to apply global styles.

Contributing

Contributions are welcome! If you have suggestions or improvements, feel free to submit a pull request or open an issue.

License

This project is licensed under the MIT License. See the LICENSE file for details.

---