🚀 Create a React-Tailwind Project
This repository provides a few convenient scripts to create a new React project using Vite and configure it with Tailwind CSS and TypeScript. It also adds HeadlessUI and HeroIcons so that TailwindUI components work 'out of the box'. Choose the version that suits your
preferences:
- NPX usage
- Node.js Version (create-tailwind-react.js).
Usage
Before running any of the scripts or even the npm version, make sure you have node.js installed. If you haven't installed node yet, run brew install node in your terminal( Mac). For other systems please use built in package managers or find installers for your system type located at Node.js.org. If you have already installed Node.js, please ensure that you have the latest version installed, as older versions may not function correctly. Verified to work on Node.js version 18.6 and NPM version 8.14 and higher.
📦 NPX usage (RECOMMENDED)
In a terminal run the following:
npx create-tailwind-react <your-project-name>
Node.js Version
- Install Node.js on your machine if you haven't already.
- Run
npm i -g create-tailwind-react to install globally on your machine.
- Run
create-tailwind-react <your_project_name> to create a new React project with Vite, install Tailwind CSS and its dependencies, and update the project configuration files.
Keep in mind that you will have to manually update when it is locally installed.
All versions will create a new React project with Vite, install Tailwind CSS and its dependencies, and update the project configuration files.
After running the script, start using Tailwind's utility classes to style your content! 🎨
💡 Don't forget to check the generated tailwind.config.js and src/index.css files.
Start your engines! 🏎️
Start the local dev server:
npm run dev
🎉 Happy coding! 🥳
