This content originally appeared on DEV Community and was authored by Hasib Al Rashid
Setting up Tailwind with React
We all know setting up tailwind with React is somewhat a pain for the beginners. I personally got into this problem too. Today here we will be setting up tailwindcss from scratch.
Note: This tutorial can also be used in a project made before
Without talking anymore lets jump right into the tutorial
First we will start our react project in the normal way
npx create-react-app project-name
Right when you see the Happy Hacking Text in your screen, then you know that its done
Cd into the Folder and lets start editing and stuffs!
Open your code editor. (Mine is VSCode)
Now open your terminal and Install the following things.
With NPM:
npm i -D tailwindcss postcss autoprefixer postcss-cli
With Yarn:
yarn add -D tailwindcss postcss autoprefixer postcss-cli
Now Create output.css and tailwind.css Files in the src folder like in the structure given below.
src/
├── styles/
├── output.css
└── tailwind.css
├── app.js
└── index.js
Your folder structure should look like this
In the tailwind.css file, Paste this code.
@tailwind base;
@tailwind components;
@tailwind utilities;
Leave the Output.css file empty because it will be taken care of Postcss.
Now enter the following two commands in the Command Line:
(Works with both yarn and npm)
npx tailwindcss init --full
and
npx tailwindcss init tailwindcss-config.js -p
Now we have to edit the Following Lines in package.json
"scripts": {
"start": "npm run watch:css && react-scripts start",
"build": "npm run watch:css && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"watch:css": "postcss src/styles/tailwind.css -o src/styles/output.css"
},
Now in order to wrap up and actually code in tailwind we have to import the following line in out App.js file.
import './styles/output.css'
Now start the project and play with Tailwind yourself!
npm run start
or
yarn start
We are all good. We can now use tailwind in our react project!
HOLD UP! But there is no Intellisense :(
First of all it is all bland and there is no suggestions on what will we do.
For that we need to add a Extension in VSCode for Tailwind
Simply search Tailwind in the extensions tab and install the first one :)
Restart your code editor and now we have awesome Tailwind Intellisense!
? Happy Hacking!
Follow me on Github at https://github.com/hasib-rashid
This content originally appeared on DEV Community and was authored by Hasib Al Rashid
Hasib Al Rashid | Sciencx (2021-09-13T16:43:49+00:00) TailwindCSS with ReactJS. Retrieved from https://www.scien.cx/2021/09/13/tailwindcss-with-reactjs/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.