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
Adding Tailwind
Finally we need to add tailwind. First we need to install the needed modules
npm install -D tailwindcss postcss autoprefixer
Next we need to create the config files which can easily be done via the following command:
npx tailwindcss init -p
Next open up the created "tailwind.config.js" file and add the following to "content":
content: [
'./src/**/*.{js,jsx,ts,tsx}',
],
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;
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;
Done, now let's start the application.
npm start
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.
Latest comments (8)
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.
the one that tailwind doc suggests for create react app doesnt work, this one works, thanks a lot!
Really? :O Your welcome, glad it helped :)
not working
This is great!
Thanks ☺️
Thanks a lot!
Your welcome :D