{"id":57221,"date":"2023-04-30T13:00:08","date_gmt":"2023-04-30T07:30:08","guid":{"rendered":"https:\/\/2thenew.online\/blog\/?p=57221"},"modified":"2023-05-18T13:02:57","modified_gmt":"2023-05-18T07:32:57","slug":"tailwind-css-setup-tailwind-with-react","status":"publish","type":"post","link":"https:\/\/2thenew.online\/blog\/tailwind-css-setup-tailwind-with-react\/","title":{"rendered":"Tailwind CSS: Setup Tailwind With React"},"content":{"rendered":"

Setup tailwind with react<\/h1>\n

1. create your project folder<\/h3>\n

Open the terminal and navigate your created project, and then run the below command
\nnpx create-react-app react-demo.<\/p>\n

Once reactdemo app has been created,<\/p>\n

\"Blog<\/p>\n

>> go to the react-demo folder<\/p>\n

>> run the “npm start” command<\/p>\n

2. Install Tailwind CSS and generate the configuration file<\/strong><\/h3>\n

>> npm install -D tailwindcss
\n>> npx tailwindcss init<\/p>\n

Your folder and package.json file should look like this in your VSCode:\u200c
\n<\/strong><\/p>\n


\n<\/strong>\"Blog<\/p>\n

\"Blog<\/p>\n

3. Configure your template paths<\/strong><\/h3>\n

Add the paths to all of your template files in your tailwind.config.js file.<\/p>\n

\/** @type {import('tailwindcss').Config} *\/\r\nmodule.exports = {\r\ncontent: [\r\n\".\/src\/**\/*.{js,jsx,ts,tsx}\",\r\n],\r\ntheme: {\r\nextend: {},\r\n},\r\nplugins: [],\r\n}<\/pre>\n
your file should now look like this:
\n<\/strong>
\n\"Blog<\/p>\n
4. Add the Tailwind directives to your CSS<\/strong><\/h3>\n
Add the @tailwind directives for each of Tailwind\u2019s layers to your .\/src\/index.css file.<\/p>\n
@tailwind base;
\n@tailwind components;
\n@tailwind utilities;<\/p>\n
your file should now look like this:
\n<\/strong>
\n\"Blog<\/p>\n
Writing CSS:\u00a0<\/strong><\/p>\n
You can start using Tailwind\u2019s utility classes to style your content. Navigate to your App.jsx file, where you should see this below:<\/p>\n
\"Blog<\/p>\n
Output<\/p>\n
\"Blog<\/p>\n
Note:<\/strong> if your tailwind CSS property is not reflected on the application, restart your react app.<\/p>\n
Conclusion:<\/h3>\n
Now you can develop your responsive application with react and tailwind CSS. For more exploration, you can go through here. <\/a>Thanks for reading this article; I hope you will find this helpful.<\/p>\n
<\/div>","protected":false},"excerpt":{"rendered":"
Setup tailwind with react 1. create your project folder Open the terminal and navigate your created project, and then run the below command npx create-react-app react-demo. Once reactdemo app has been created, >> go to the react-demo folder >> run the “npm start” command 2. Install Tailwind CSS and generate the configuration file >> npm […]<\/p>\n","protected":false},"author":1546,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":14,"footnotes":""},"categories":[3602,3429,3038],"tags":[4862,4860,5199],"class_list":["post-57221","post","type-post","status-publish","format-standard","hentry","category-drupal","category-front-end-development","category-react-js","tag-drupal","tag-front-end-development","tag-react-js-technology"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t