⚡️ Vite + React + Tailwind CSS starter for super fast prototyping

This template is a starter for those looking to use Vite and Tailwind in a React project.

wobsoriano / vite-react-tailwind-starter

Starter using Vite + React + Tailwind CSS 2

Vite + React + Tailwind CSS starter

Inspired by posva's vite-tailwind-starter

Note if you have access to Tailwind UI, you can follow the following steps to add it:

1. Install @tailwindcss/ui:

yarn add @tailwindcss/ui

2. Add the plugin in tailwind.config.js without changing anything else:

// tailwind.config.js
module.exports = {
  // ...
  // rest of the config
  plugins: [require('@tailwindcss/ui')],
}

Installation

yarn

Development

yarn dev

Build

yarn build

View on GitHub

Demo: https://vite-react-tailwind.vercel.app

What is Vite?

Vite is a no-bundle development server primarily designed to work with Vue 3, and now supports other framework as well.

To create a project, just run

$ npm init vite-app <project-name> --template <template-name>

The available templates are:

• vue (default)
• react
• react-ts
• preact
• reason-react

Tailwind UI

Tailwind UI provides a collection of beautifully designed snippets you can drop into your Tailwind projects. They are offering free sample components and I used some of it to create this starter template.

Thank you.

Comments

[Alexandru-Dan Pop]

I've heard of Vite and it's bundle free approached, but I wonder -> won't making a HTTP call for every package make the initial start time of your app really slow?

[James Thomson]

It's only bundle free when in development. Production builds are still bundled, but with Rollup instead of Webpack.