DEV Community

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

Posted on

⚡️ 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.

GitHub logo 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
Enter fullscreen mode Exit fullscreen mode
  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')],
}
Enter fullscreen mode Exit fullscreen mode

Installation

yarn
Enter fullscreen mode Exit fullscreen mode

Development

yarn dev
Enter fullscreen mode Exit fullscreen mode

Build

yarn build
Enter fullscreen mode Exit fullscreen mode



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>
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (2)

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.