An Interest In:
Web News this Week
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
Setup Tailwind with Create React App without craco.
What is tailwind?
A utility-first CSS framework that can be composed to build any design, directly in your markup.
Setting up Tailwind CSS
In this guide, well cover a simple installation of Setting up Tailwind CSS in a Create React App project.
Uninstall create-react-app (recommended)
If you've previously installed create-react-app globally. we recommend you uninstall the package using:
npm uninstall -g create-react-app
or yarn global remove create-react-app
Existing React Project
Bump "react-scripts" in package.json to 5.0.0 and run npm install
.
New React Project
To create a new app use the following commands
npx create-react-app my-app
or yarn create react-app my-app
Once new app is intialized go to the app directory, In our case cd my-app
Install Tailwind CSS
Install tailwindcss and its peer dependencies via npm
npm install -D tailwindcss postcss autoprefixer
Generate Config
Then run the init command to generate both tailwind.config.js
and postcss.config.js
.
npx tailwindcss init -p
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}", ], ...}
Add the Tailwind directives to your CSS
Add the tailwind directives for each of Tailwinds layers to your ./src/index.css
file.
@tailwind base;@tailwind components;@tailwind utilities;
Start your dev process
Run your build process with npm run start
.
That's all. Enjoy.
Original Link: https://dev.to/cheralathann/setup-tailwind-with-create-react-app-without-craco-ph7
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To