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:
- Install
@tailwindcss/ui:
yarn add @tailwindcss/ui
- Add the plugin in
tailwind.config.jswithout changing anything else:
// tailwind.config.js
module.exports = {
// ...
// rest of the config
plugins: [require('@tailwindcss/ui')],
}
Installation
yarn
Development
yarn dev
Build
yarn build
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.
Top comments (2)
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?
It's only bundle free when in development. Production builds are still bundled, but with Rollup instead of Webpack.