React and Typescript Setup
First of all, make sure that Node JS is already installed. If not you can check the installation here. In this tutorial, I will be using typescript for the React application.
The simplest and fastest way to set up React is by using facebook's Create React App (CRA) site generator.
If you already have an existing React application and you want to add typescript inside you can use this command:
After the installation, the package.json file should show React and Typescript packages. Change the .js files to .tsx file to use the Typescript features.
Tailwind Setup
First, install Tailwind and all the dependencies using:
After Tailwind dependencies are installed successfully, we will configure the tailwind using CRACO by running:
After that, update your package.json instead of using "react-scripts", change that into "craco" except the "eject" part:
Next, create a craco.config.js file inside your root project and follow the content below:
If you want to explore further on PostCSS plugins you can check it here.
After that, generate the tailwind.config.js file:
To avoid unused styles in production builds you can add this to tailwind.config.js inside "purge" section:
Update the index.css that was created by default using Create React App command:
@tailwind components;
@tailwind utilities;
Ensure you have imported the index.css inside your index.tsx file.
Congratulations! You have finished the tutorial to create react typescript using Tailwind CSS! After this, you can run and test your React Typescript application using the npm run start command.