Vanilla JS and Tailwind CSS Boilerplate with Vite

This is a simple boilerplate project for getting started with a web development project using Vanilla JavaScript and Tailwind CSS, powered by Vite.

Features

• Vanilla JavaScript: Write modern JavaScript code without any frameworks or libraries.
• Tailwind CSS: Utilize the power of Tailwind CSS to create highly customizable and responsive UI components. (v. 4.0.17)
• Vite: Enjoy a fast development experience with Vite's blazing-fast build tooling. (v. 6.2.3)

Getting Started

1. Clone the repository:

git clone https://github.com/jhordyess/vanilla-tailwindcss-boilerplate.git

2. Navigate to the project folder:

cd vanilla-tailwindcss-boilerplate

3. Install dependencies:

yarn

# With npm
npm install

4. Start the development server:

yarn dev

# With npm
npm run dev

5. Open your browser and visit http://localhost:5173 to see your project.

Project Structure

vanilla-tailwindcss-boilerplate/
├── .gitignore List of files and directories to be ignored by version control.
├── index.html Entry point HTML file.
├── package.json Project configuration and dependencies.
├── README.md Project documentation.
├── vite.config.js Vite configuration file.
├── src/
│   ├── main.js Main JavaScript file.
│   ├── style.css Main CSS file. Add Tailwind CSS setup here.

Commands

Start the development server

yarn dev

# With npm
npm run dev

Build the project for production

yarn build

# With npm
npm run build

Preview the project before production

yarn preview

# With npm
npm run preview

Contributing

Contributions are welcome! If you find any issues or want to enhance the project, feel free to submit a pull request.

Happy coding!