Table of Contents
When it comes to Styling our websites as quickly as possible it’s obvious to use UI frameworks like Bootstrap and Tailwind CSS but even if it is easier to style our web app with Bootstrap,
It leaves its smell in our website so we might use Tailwind CSS to create the most custom website possible without using CSS ( Of course Pure CSS is always the king ).
So let’s leave this debate for the latter and let’s learn How we can install and use Tailwind CSS to style our React application.
We can use Tailwind CSS in React App in two ways
- By using Tailwind Play CDN
- By Using Tailwind CLI
In this tutorial we are going to use Tailwind CSS in our React app so make sure to create a React App with npx create-react-app app-name
By using Play CDN
Just add this code inside <head> </head> tag of your index.html inside the public folder and you are ready to use Tailwind CSS in your app.
<script src="https://cdn.tailwindcss.com"></script>And You can use Tailwind Classes inside your components in your app.
By using Tailwind CLI Tool
Tailwind CLI tool is an NPM package that can be used to configure and use Tailwind styling in a React or any Node project, so let’s configure it in your React App.
Create React App
First, create a great app if you haven’t already with this command.
npx create-react-app my-projectNow navigate to the project folder with this command
cd my-projectInstall Tailwind CSS
Now we have to install Tailwind CSS and its related dependencies smooth the generation of our Output CSS from Tailwind CSS
npm install -D tailwindcss postcss autoprefixerNow run the init command below to generate configs files for Tailwind and Postcss i,e tailwind.config.js and postcss.config.js
npx tailwindcss init -pConfigure your template paths
Add the paths to all of your template files in your tailwind.config.js file.
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}Add the Tailwind directives to your CSS
Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.
@tailwind base;
@tailwind components;
@tailwind utilities;Start your build process
Run your build process with npm run start.
npm run startStart using Tailwind in your project
Start using Tailwind’s utility classes to style your content.
export default function App() {
return (
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
)
}
