DEV Community

loading...
Cover image for ⚡️ Vite + React + Tailwind CSS starter for super fast prototyping

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

wobsoriano profile image Robert ・1 min read

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

GitHub logo wobsoriano / vite-react-tailwind-starter

Starter using Vite + React + Tailwind

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
  1. 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

TypeScript Support

Head over to the vite react-ts template and just copy the needed files.




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.

Discussion (2)

pic
Editor guide
Collapse
alexandrudanpop profile image
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?

Collapse
jamesthomson profile image
James Thomson

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