Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ipuppyyt/vite-tailwindcss

A vite package preconfigured with tailwindcss, with added option for SCSS
https://github.com/ipuppyyt/vite-tailwindcss

cli create-vite-tailwind css javascript npm npm-cli npm-package npmjs scss swc tailwindcss template typescript vite

Last synced: 3 months ago
JSON representation

A vite package preconfigured with tailwindcss, with added option for SCSS

Host: GitHub
URL: https://github.com/ipuppyyt/vite-tailwindcss
Owner: ipuppyyt
License: mit
Created: 2024-11-04T04:27:12.000Z (3 months ago)
Default Branch: main
Last Pushed: 2024-11-04T11:18:52.000Z (3 months ago)
Last Synced: 2024-11-04T11:24:39.041Z (3 months ago)
Topics: cli, create-vite-tailwind, css, javascript, npm, npm-cli, npm-package, npmjs, scss, swc, tailwindcss, template, typescript, vite
Language: JavaScript
Homepage: https://www.npmjs.com/package/vite-tailwindcss
Size: 43.9 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: readme.md
- License: LICENSE

Awesome Lists containing this project

README

        # Create Vite Tailwind CSS

![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=flat&logo=typescript&logoColor=white&color=blue)

![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=flat&logo=vite&logoColor=white)

![SASS](https://img.shields.io/badge/SASS-hotpink.svg?style=flat&logo=SASS&logoColor=white)

![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=flat&&logo=tailwind-css&logoColor=white)

![Node.js Version](https://img.shields.io/badge/Node.js-v18.0.0-339933?style=flat&logo=node.js&logoColor=white&color=blue)

![NPM Version](https://img.shields.io/npm/v/vite-tailwindcss?style=flat&logo=npm&logoColor=white&color=blue)

![License](https://img.shields.io/npm/l/vite-tailwindcss?color=blue)

![NPM Downloads](https://img.shields.io/npm/dm/vite-tailwindcss.svg?style=flat&color=blue)

Create Vite Tailwind CSS is a command-line interface (CLI) tool that simplifies the process of bootstrapping a new project using [Vite](https://vitejs.dev/) and [Tailwind CSS](https://tailwindcss.com/). This tool supports JavaScript, TypeScript, and various stylesheets (CSS and SCSS) for modern web development.

## Features

- Quick and easy setup for Vite and Tailwind CSS projects.

- Supports multiple libraries as in Vite

- Choose between JavaScript, TypeScript, and SWC variants for optimized builds.

- Flexible stylesheet options: CSS or SCSS.

- Prompts for user-friendly interaction during project setup.

## Getting Started

### Prerequisites

Make sure you have [Node.js](https://nodejs.org/) installed on your machine (version 14 or higher).

### Usage

You can use it directly with `npx`:

```bash

npx vite-tailwindcss

```

You'll be prompted to enter details such as:

- **Project name**: Your desired project name.

- **Library**: Choose from React, Vue, Svelte, etc..

- **Variant**: Depending on the library chosen, select your preferred one.

- **Stylesheet format**: Choose between CSS or SCSS.

### Example Workflow

- Run the command to create your project:

    ```bash

    npx vite-tailwindcss

    ```

- Follow the prompts to set up your project.

- Navigate into your project directory:

    ```bash

    cd your-project-name

    ```

- Install dependencies:

    ```bash

    npm install

    ```

- Start your development server:

    ```bash

    npm run dev

    ```

## License

This project is licensed under the MIT License.

## Contributing

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

## Acknowledgements

- [Vite](https://vite.dev/)

- [Tailwind CSS](https://tailwindcss.com/)

- [SCSS](https://sass-lang.com/)