{"id":57221,"date":"2023-04-30T13:00:08","date_gmt":"2023-04-30T07:30:08","guid":{"rendered":"https:\/\/www.tothenew.com\/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:\/\/www.tothenew.com\/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

\"\"<\/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>\"\"<\/p>\n

\"\"<\/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\"\"<\/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\"\"<\/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
\"\"<\/p>\n
Output<\/p>\n
\"\"<\/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":13},"categories":[3602,3429,3038],"tags":[4862,4860,5199],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/57221"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1546"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=57221"}],"version-history":[{"count":3,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/57221\/revisions"}],"predecessor-version":[{"id":57399,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/57221\/revisions\/57399"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=57221"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=57221"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=57221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}