vite-biome-tailwind-template

Simple expansion of Vite's React template to create TypeScript projects integrated with:

• Biome: A fast formatter and linter (replacing both ESLint and Prettier) written in rust.
• TailwindCSS: CSS utility that provides classes to apply inline styles to components

Contents

The unchanged vite-generated files: .gitignore, index.html, tsconfig.app.js, tsconfig.node.json, tsconfig.json, vite-config files.

A package.json (and package-lock.json) file with ESLint, Prettier and their dependencies removed. Biome and TailwindCSS are installed as devDependencies. Available scripts are:

• dev, build, preview as provided by Vite
• format: formats the project using Biome's formatter
• lint: lints the project using Biome's linter

Tailwind config files, including the default tailwind.config.js and postcss.config.js.

Biome config file biome.json. In addition to default config, it has git integration enabled, and has the experimental useSortedClasses (sorting of tailwind classes) rule enabled.

Usage

1. Clone to your machine. Do this by:

   • Copying using degit to download the files in the repo without the git history. (RECOMMENDED)

     • npx degit not-first/vite-biome-tailwind-template project-name

   • Cloning this repo to your machine. This will keep the git history of this repo.

     • git clone https://github.com/not-first/vite-biome-tailwind-template.git

   • Creating a repo using this template. Note that your repo will signify that it was built from this template.

     • Click here, or the 'Use this template' green button in the top right.

2. Install dependencies though npm install.

3. Alter for your needs. Remember to:

   • Update the LICENSE to the correct license and name
   • Change the name and author properties in package.json
   • Clean up the README.md

4. You are good to go. Start the project with npm run dev and you will see an altered Vite starting screen with Vite, React, Biome and Tailwind styled using Tailwind classes.

Docker Instructions

Building the Docker Image

To build the Docker image, run the following command in the root directory of the project:

docker build -t my-app .

Running the Docker Container

To run the Docker container, use the following command:

docker run -p 3000:3000 my-app

Using Docker Compose

Alternatively, you can use Docker Compose to build and run the project. Run the following command:

docker-compose up --build

This will start the application and map port 3000 on your host to port 3000 in the container.