https://github.com/labnol/react-tailwind

React with Tailwind CSS Starter Kit
https://github.com/labnol/react-tailwind

react reactjs tailwind tailwindcss vite

Last synced: 2 months ago
JSON representation

React with Tailwind CSS Starter Kit

• Host: GitHub
• URL: https://github.com/labnol/react-tailwind
• Owner: labnol
• License: mit
• Created: 2020-03-15T11:51:22.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2025-03-31T17:33:46.000Z (3 months ago)
• Last Synced: 2025-04-02T12:03:09.325Z (3 months ago)
• Topics: react, reactjs, tailwind, tailwindcss, vite
• Language: JavaScript
• Homepage: https://digitalinspiration.com/
• Size: 3.27 MB
• Stars: 51
• Watchers: 0
• Forks: 34
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 🚀 React and Tailwind Starter Kit

Quickly set up a new `React.js` project with Tailwind CSS using the [starter kit](https://github.com/labnol/react-tailwind). The project was bootstrapped with Vite (replacing Create React App) and it uses the `singlefile` plugin to inline all the JavaScript and CSS files into a single minified file.

The latest version of the starter kit is built with React 19 and Tailwind CSS 4.

## Live Demo

The [Digital Inspiration](https://digitalinspiration.com/) website is built with the Tailwind CSS, React.js and Vite. You can test the starter kit by opening the project in [StackBlitz](https://stackblitz.com/github/labnol/react-tailwind) or [CodeSandbox](https://codesandbox.io/p/sandbox/github/labnol/react-tailwind).

[![Screenshot](screenshot.png)](https://stackblitz.com/github/labnol/react-tailwind)

[![Open in StackBlitz](https://img.shields.io/badge/Open_In_StackBlitz-blue.svg?logo=stackblitz&style=flat-square)](https://stackblitz.com/github/labnol/react-tailwind) [![Open in CodeSandbox](https://img.shields.io/badge/Open_In_CodeSandbox-000000?logo=codesandbox&style=flat-square)](https://codesandbox.io/p/sandbox/github/labnol/react-tailwind)

### Available `npm` commands

In the project directory, you can run:

#### `npm run start`

Runs the app in the development mode.

Open `http://localhost:5173` to view it in the browser. The page will reload if you make edits. You will also see any lint errors in the console.

#### `npm run build`

Builds the React app for production to the `build` folder. It correctly bundles React in production mode and optimizes the build for the best performance.

#### `npm run inline`

This command will inline all the JavaScript and CSS files from the production build into a single minified file.

## Connect with me

The React and Tailwind CSS starter is written by [Amit Agarwal](https://www.labnol.org/about).

[![X](https://img.shields.io/badge/Twitter-black.svg?logo=X&logoColor=white&style=flat)](https://x.com/labnol) [![YouTube](https://img.shields.io/badge/YouTube-%23FF0000.svg?logo=YouTube&logoColor=white&style=flat)](https://www.youtube.com/labnol) [![Google](https://img.shields.io/badge/Google-black.svg?logo=Google&logoColor=white&style=flat)](https://g.dev/amit) [![Instagram](https://img.shields.io/badge/Instagram-%23E4405F.svg?logo=Instagram&logoColor=white&style=flat)](https://instagram.com/labnol) [![LinkedIn](https://img.shields.io/badge/LinkedIn-%230077B5.svg?logo=linkedin&logoColor=white&style=flat)](https://linkedin.com/in/labnol) [![Stack Overflow](https://img.shields.io/badge/-Stackoverflow-FE7A16?logo=stack-overflow&logoColor=white&style=flat)](https://stackoverflow.com/users/512127/amit-agarwal)

If you have any questions or feedback, send an email at [[email protected]](mailto:[email protected]?subject=Tailwind+React).