HomeAbout Us
Setup ReactJS Typescript with Tailwind CSS
coding
Setup ReactJS Typescript with Tailwind CSS
Kevin Mustafa
Kevin Mustafa
July 21, 2021
1 min

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.


Tags

#coding#developer#getting-started#javascript#nodejs#open-source#react#typescript#tools#web-development#web-framework
Kevin Mustafa

Kevin Mustafa

Indonesia

I am Kevin, nice to meet you.

Expertise

Related Posts

Top 7 Coding Challenges
Top 7 Coding Challenges
August 21, 2021
1 min
© 2021, All Rights Reserved.

Quick Links

About Us