Overview
Being the best web design company, we believe that the design of the website creates first impressions on a website visitor. A well-designed website grabs attention of the visitors and converts them into customers.
We are going to take a glimpse at how designers can start TailwindCSS with ReactJS in this blog. Before that, did you read our first blog of tailwindCSS setup? You can check our previous blog for an initial understanding of tailwindCSS setup and get an idea of PostCSS.
TailwindCSS setup with ReactJS
For Setup of Tailwind CSS you need to have Node.js 12.13.0 or higher. Now create a new project folder for tailwind.
- First, we need to create react app and go into that directory
npx create-react-app reactailwind
and
cd reactailwind
- To take complete advantage of the features of TailwindCSS we need to install the TailwindCSS package and PostCSS packages by using the below command. Create React App doesn’t support PostCSS 8 yet so we need to install PostCSS 7 for now.
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
Once this command runs, we have node_modules , public and src folder with package-lock.json and package.json file in our project folder.
Include CRACO
CRACO(Create React App Configuration Override) is an easy and comprehensible configuration layer for create-react-app. We can customize PostCSS configurations with the help of CRACO.
- Create React App does not let us override the PostCSS configuration in this project so we also need to install CRACO to be able to configure TailwindCSS.
npm install @craco/craco
- We have to create an craco.config.js at the root of our project and add the below code:
//craco.config.js module.exports = { style: { postcss: { plugins: [ require('tailwindcss'), require('autoprefixer'), ], }, }, }Now replace package.json file following code,
"start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test",
With below code.
"start": "craco start", "build": "craco build", "test": "craco test",
- Now we need to create our initial configuration file of tailwind with this command. This command generates one file tailwind.config.js , we can modify tailwind styles and add our classes to this file.
npx tailwindcss init
- For including @tailwind directives we need to create an assets folder in the src folder. In this, we have to create a css folder and then create tailwind-directives.css file.
Now Put all three directives in tailwind-directives.css@tailwind base; @tailwind components; @tailwind utilities;
- Now let’s create a Postcss.config.js (PostCSS configuration file) at the root of your project and add this code in this file
module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, } } - To execute the build procedure for generating tailwind styles from tailwind-directives.css file, compile tailwind.css in package.json
npx tailwindcss build src/assets/css/tailwind-directives.css -o src/assets/css/tailwind.css
You can check there is one generated file tailwind.css in your project folder with all tailwindCSS styles and Autoprefixer vendor prefixes are already added. -Webkit, -moz are already available in tailwind.css.
Now open App.js file and add tailwind.css file by @import directive.import ./assets/css/tailwind.css';
After that run build command :
npm start
Include sass in React Project
We can also use sass preprocessors in this React project. First of all install node-sass and import style.scss file in App.js
npm install node-sass@4.14.1
OR
yarn add node-sass@4.14.1
import ‘./assets/css/style.scss’;
Conclusion
I hope this blog might be useful for your React project . You can ask your queries or leave your comments in the comment section.
You may also like
Top Laravel Development Companies in India to Watch Out For in 2024
Today’s modern-day consumers demand aesthetically pleasing...
Laravel 11: Suite of New Features Unlocked!
Web application development is at an all time high. And, so is the PhP framework giant- Laravel. Wit...
Why Your Business Need to Hire a Professional Web Development Company?
Businesses of all walks and sizes hinge on web development c...
