Pre-requisites
- Basic familiarity with yarn or npm
- Experience with React
- Knowledge of how to use the terminal
Important Links
Before we start
Before learning how to initialize the project, we must first learn what exactly Vite, TailwindCSS, and npm/yarn are. Here are some short descriptions:
- yarn/npm - Javascript Package Managers: Package managers are tools that help you manage packages as dependencies and might also provide a global package registry. They work based on manifest files that keep track application metadata and needed dependencies, lock files to offer deterministic installs. https://ageek.dev/js-package-managers
- Vite - Javascript Bundlers: A JavaScript bundler is a tool that puts your code and all its dependencies together in one JavaScript file. https://medium.com/@gimenete/how-javascript-bundlers-work-1fc0d0caf2da
- TailwindCSS: A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. https://tailwindcss.com/
Creating a new project
Here is what we are going to do:
- Initialize a Vite project with yarn/npm
- Install TailwindCSS
Initilizing a Vite project with yarn/npm
Notes:
- Make sure you select "React" when creating the project!
- If you have used
create-react-app in the past, you might have noticed the index.html file is outside the public folder. This is how Vite chooses to organize it's file structure and is normal. To learn more: https://vitejs.dev/guide/#index-html-and-project-root
With npm: npm create vite@latest
With yarn: yarn create vite
Installing and configuring TailwindCSS
Note: You MUST complete the previous step for this to work
To install TailwindCSS, run these commands line-by-line (in the root directory of your project) in a terminal:
Line-by-line explanation of the above commands:
- 1: This installs the project's dependencies
- 2: This installs TailwindCSS and its dependencies
- 3: This creates the necessary configuration files
Note: You should see a new file called tailwind.config.js, if you do not, run npm tailwindcss init -p again.
Open the file and delete everything. Next, paste the following code in the file and save:
module.exports = {
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
};
Next, open the index.css file in the src directory and delete everything. Then, paste the following:
@tailwind base;
@tailwind components;
@tailwind utilities;
Verifying everything works
Note: If you started the development server earlier, before you finished configuring Tailwind, Tailwind might not work. Shutdown the server and try again.
Open up the App.jsx file and change on the element's class name with a Tailwind utility name.
For example you can change one of the <p> element's class name:
Now, run yarn run dev (you can use npm instead as well). This will start the Vite development server on http://localhost:3000 or another address if port 3000 is in use.
Navigate to your development server's URL (as shown when you start the server). It should look something like this:
Congratulations! You have sucessfully created a new React project using Vite with TailwindCSS
Today you learned:
- How to create a new React project using npm/yarn and the Vite bundler
- How to use install and use TailwindCSS in a React Vite project
