How to create a React + TypeScript + Tailwind CSS project
To create a React + TypeScript + Tailwind CSS project, you can follow these steps:
1. Make sure you have Node.js and npm (comes with Node) installed on your system. You can check if you have them installed by running the following commands:
node -v
npm -v2. Create a new project directory and navigate to it:
mkdir my-project
cd my-project3. Initialize a new npm project by running the following command:
npm init -y4. Install React and TypeScript as dependencies by running the following command:
npm install react react-dom typescript @types/react @types/react-dom5. Create a tsconfig.json file in your project directory to configure the TypeScript compiler. You can do this by running the following command:
npx tsc --init6. Install the required development dependencies for React and TypeScript by running the following command:
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript @babel/cli @babel/node @babel/polyfill @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread @babel/plugin-transform-runtime @babel/runtime @types/babel__core @types/babel__runtime
7. Install Tailwind CSS and its TypeScript definitions by running the following command:
npm install tailwindcss @types/tailwindcss8. Create a tailwind.config.js file in your project directory and configure Tailwind CSS to your liking. You can find more information on how to do this in the Tailwind CSS documentation.
9. Create a .babelrc file in your project directory and add the following code to it to configure the Babel preset:
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript"
],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-transform-runtime"
]
}
10. Create a webpack.config.js file in your project directory and add the following code to it to configure Webpack:
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './src/index.tsx',
mode: 'development',
module: {
rules: [
{
test: /\.(ts|tsx)$/,
use: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true,
},
},
'postcss-loader',
],
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
output: {
path: path.join(__dirname, '/dist'),
publicPath: '/',
filename: 'bundle.js',
},
devServer: {
contentBase: './dist',
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development'),
}),
],
};
This configuration file tells Webpack to compile and bundle all of your TypeScript and CSS files, and to output the result to the /dist directory.
11. Create a src directory in your project directory and add an index.html file to it with the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React + TypeScript + Tailwind CSS</title>
</head>
<body>
<div id="root"></div>
<script src="/bundle.js"></script>
</body>
</html>
This file creates a root element for your React app and includes the bundled JavaScript file that Webpack will generate.
12. Create a src/index.tsx file in your project directory and add the following code to it:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
const App = () => (
<div className="text-center text-2xl font-bold text-gray-800">
Hello, World!
</div>
);
ReactDOM.render(<App />, document.getElementById('root'));
This file is the entry point for your React app. It defines a simple component that displays “Hello, World!” and renders it to the root element in the index.html file.
13. Add the following scripts to the scripts field in your package.json file:
"scripts": {
"build": "webpack --config webpack.config.js",
"start": "webpack-dev-server --config webpack.config.js --open",
"build:css": "tailwindcss build src/index.css -o src/bundle.css",
"watch:css": "tailwindcss watch src/index.css -o src/bundle.css"
}
The build script will run Webpack in production mode and generate a minified version of your app in the /dist directory.
The start script will start the Webpack development server and open your app in a new browser window.
The build:css script will build your Tailwind CSS styles and output them to the src/bundle.css file.
The watch:css script will watch your Tailwind CSS styles for changes and rebuild them whenever a change is detected.
14. Create a src/index.css file and add the following code to it:
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';This file imports the base, component, and utility styles provided by Tailwind CSS.
15. Run the following command to build your Tailwind CSS styles:
npm run build:css
16. Include the src/bundle.css file in your index.html file by adding the following line to the element:
<link rel="stylesheet" href="/bundle.css" />17. Run the following command to start the Webpack development server:
npm startThis will compile and bundle your app, and open it in a new browser window. You should see the “Hello, World!” message displayed on the page.
That’s it! You now have a basic React + TypeScript + Tailwind CSS project set up. You can start building your app by adding more components and styling them with Tailwind CSS.