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.
# Generate a new React Typescript project
npx create-react-app new-typescript-app --template typescript
# Wait for installation, after that go to the created directory
cd new-typescript-app
If you already have an existing React application and you want to add typescript inside you can use this command:
# Adding typescript template to existing project
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
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:
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
After Tailwind dependencies are installed successfully, we will configure the tailwind using CRACO by running:
npm install @craco/craco
After that, update your package.json instead of using "react-scripts", change that into "craco" except the "eject" part:
{
...
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject",
}
}
Next, create a craco.config.js file inside your root project and follow the content below:
// craco.config.js
module.exports = {
style: {
postcss: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
]
}
}
}
If you want to explore further on PostCSS plugins you can check it here.
After that, generate the tailwind.config.js file:
npx tailwindcss-cli@latest init
To avoid unused styles in production builds you can add this to tailwind.config.js inside "purge" section:
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
Update the index.css that was created by default using Create React App command:
/* ./src/index.css */
@tailwind base;@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.
