DEV Community

Cover image for Creating a React App with Typescript + Tailwind Support
Ethan
Ethan

Posted on

Creating a React App with Typescript + Tailwind Support

Introduction

Hello! Here I will try to explain how to set up a React app with both Typescript and Tailwind.


Creating the React app with Typescript

This part is really simple, all you need to do is add the template option to create-react-app command.
Feel free to reaplace "app" with anything else.

Once installed simple cd into the directory.



npx create-react-app app --template typescript

cd app


Enter fullscreen mode Exit fullscreen mode

Adding Tailwind

Finally we need to add tailwind. First we need to install the needed modules



npm install -D tailwindcss postcss autoprefixer 


Enter fullscreen mode Exit fullscreen mode

Next we need to create the config files which can easily be done via the following command:



npx tailwindcss init -p


Enter fullscreen mode Exit fullscreen mode

Next open up the created "tailwind.config.js" file and add the following to "content":



content: [
    './src/**/*.{js,jsx,ts,tsx}',
],


Enter fullscreen mode Exit fullscreen mode

Next we need to add the Tailwind directives to the "src/index.css" file, add the following to the top of the file:



@tailwind base;
@tailwind components;
@tailwind utilities;


Enter fullscreen mode Exit fullscreen mode

Checking that it works

Now that we have set up Typescript and Tailwind we need to check to see if it works.
Open up "src/App.tsx" and change it to the following:



import React from 'react';
import './App.css';

function App() {
  return (
    <h1 className="text-3xl font-bold underline text-red-600">
      Simple React Typescript Tailwind Sample
    </h1>
  );  
}

export default App;


Enter fullscreen mode Exit fullscreen mode

Done, now let's start the application.



npm start


Enter fullscreen mode Exit fullscreen mode

The browser should automatically open and display the index page. If all is okay the header should be bold, underlined and red. 😀

The source for this example can be found here:
https://github.com/ethand91/react-typescript-tailwind


Like me work? I post about a variety of topics, if you would like to see more please like and follow me.
Also I love coffee.

“Buy Me A Coffee”

Top comments (9)

Collapse
 
dandanbohdan profile image
Dan

the one that tailwind doc suggests for create react app doesnt work, this one works, thanks a lot!

Collapse
 
ethand91 profile image
Ethan

Really? :O Your welcome, glad it helped :)

Collapse
 
melodydev0521 profile image
James

This is great!

Collapse
 
ethand91 profile image
Ethan

Thanks ☺️

Collapse
 
season_dev_8939f521eec755 profile image
Season Dev

That is very good .

Collapse
 
svitanok profile image
Ivan • Edited

Thanks a lot!

Collapse
 
ethand91 profile image
Ethan

Your welcome :D

Collapse
 
protivaahammed profile image
Protiva Ahammed

After following these instructions several files did not created automatically { .tsx file} for example App.tsx and also index.tsx
therefore if it persists then follow the given GitHub link and after correcting it accordingly it worked for me.

Collapse
 
parteekmalik profile image
Parteek malik

not working