1. Install Tailwind CSS Install tailwindcss and its peer dependencies, and then run the init command to generate both tailwind.config.js and postcss.config.js:
yarn add -D tailwindcss postcss autoprefixer
yarn tailwindcss init -p
2. Configure 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: [],
}
3. 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;
4. Import the index.css in your main.jsx
import './index.css';
5. Use Tailwind CSS:
export default function App() {
return (
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
)
}