3

Talwind CSS is not working with React. I have installed Tailwind CSS as per the documentation (https://v1.tailwindcss.com/docs/installation) and my code is below.

Can someone help me?

Here is my browser pic of the inspect to understand my problem

Here is my package.json file

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "autoprefixer": "^10.4.2",
    "postcss-cli": "^9.1.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "tailwindcss": "^3.0.18",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "build:css": "postcss src/assets/css/tailwind.css -o src/assets/css/style.css",
    "start": "npm run build:css && react-scripts start ",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Below is my postcss.config.js

  module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
  }

Below is my tailwind.config.js

  module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  plugins: [
    // ...
    require('tailwindcss'),
    require('autoprefixer'),
    // ...
  ]
}

Later, I edited my index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

//const App = require("./App");

ReactDOM.render(
    <App title="Heyy React Dev Tool"/>, document.getElementById("root")
);

I also edited my App.js like below

  import React from "react";
  import "./assets/css/style.css"

    function App({title}) {
      return (
          <div>
            <div className="bg-gray-600 text-white p-5 border">{title}</div>        
          </div>
      );
    
    }  
    export default App;

Last but now least these is my style.css file is generated

Style.css

/*
! tailwindcss v3.0.18 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
*/

html {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */
  tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/*
Ensure the default browser behavior of the `hidden` attribute.
*/

[hidden] {
  display: none;
}

*, ::before, ::after {
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
} 

'```
Ed Lucas
  • 5,955
  • 4
  • 30
  • 42
rupapayal
  • 45
  • 2
  • 8
  • Thanks in advance for helping me? – rupapayal Feb 05 '22 at 08:59
  • Hello, can some one help me? – rupapayal Feb 05 '22 at 09:53
  • Is your app created using create-react-app? – Terry Feb 05 '22 at 10:27
  • @Terry,yes, I used these command npx create-react-app my-app – rupapayal Feb 05 '22 at 11:21
  • @Terry, Can i provide access to my github project? – rupapayal Feb 05 '22 at 11:27
  • I understood a bit now If you see the pic in that Element.styles{} is empty how to reflect on that – rupapayal Feb 05 '22 at 12:53
  • Did you follow this guide? https://tailwindcss.com/docs/guides/create-react-app – Terry Feb 05 '22 at 13:12
  • yes, I followed these guide only, can I provide ACCESS TO MY git – rupapayal Feb 05 '22 at 13:47
  • 1
    Perhaps try creating a [mcve] on [codesandbox](https://codesandbox.io/): it's impossible to troubleshoot based on the code here and to know what could've gone wrong. I have personally followed the guide before and my react app compiles without an issue with tailwind CSS. When you receive no response on a question for an extended period of time, it is likely an indicative of irreproducibility, lack of clarity, rather than a reflection of the helpfulness of the community. – Terry Feb 05 '22 at 22:20
  • @Terry, I forgot to inform you that , I deleted all the files in the src folder and created my own App.js and index.js in src folder. then I install the taiwindcss. – rupapayal Feb 06 '22 at 05:55
  • Here is my codesandboxlink: https://codesandbox.io/s/late-dew-bz89t – rupapayal Feb 06 '22 at 06:43
  • I think the issue is that codesandbox doesn't allow you to run the build scripts necessary to generate your pre-built tailwind CSS file :/ but based on the generated CSS file you've shared, it appears that tailwind has failed to detect uses. I have a feeling that's because in your code example, the file `tailwind.css` is not imported anywhere else. What happens if you import it in your React app and rebuild it? – Terry Feb 06 '22 at 14:18
  • @Terry, I never mind if you make any changes :). But, I changed it by importing tailwind.css instead of style.css. But raising the same thing. COuld you please edit, that's okay for me, its a sample project – rupapayal Feb 06 '22 at 17:33
  • and i also feel that could you please help me where to write the exact console.log() so, that I will get some info, even I tried these as well, please Terry, I am trying these from a week. – rupapayal Feb 06 '22 at 17:48
  • really thanks, I followed the guide, But I mistakenly, Instead of adding in tailwind.config.js , I added in postcss.config.js. But thanks terry for your help atlost I solved it – rupapayal Feb 06 '22 at 19:03

2 Answers2

6

I've looked at your repo: and even though you said you followed the guide, you didn't. The issue boils down to not really following through the documentation properly.

This line is missing in your tailwind.config.js file, which causes tailwind to fail to detect class usage in all your .js file:

module.exports = {
  // You are missing this block that defines what files tailwind should scan for usage
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Once you add this line your CSS should build properly:

enter image description here


Other signs that you didn't follow the guide properly:

  • tailwindcss is listed as a dependency and not a devDependency
  • Your tailwind.config.js file appears outdated. Are you sure you ran npx tailwindcss init properly? Are you sure that you are indeed running v3 of Tailwind CSS?
Terry
  • 63,248
  • 15
  • 96
  • 118
0

check your index.js file you need to import ReactDom porperlt and also use it properlylike this

import ReactDom from "react-dom";

and this

import ReactDom from "react-dom";