为什么 Tailwind CSS 没有连接到我的 React 应用程序中？

Question

I am attempting to install tailwind (Which I have done many times before with no issue). Please help me with what I am missing this time around.

tailwind.config.js

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Package.json

....
  "devDependencies": {
    .....
    "autoprefixer": "^10.4.2",
    "postcss": "^8.4.6",
    "tailwindcss": "^3.0.23"
  },
....

index.js

import './index.css'

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(<App />, document.getElementById('root'))

app.js

const App = () => {
  return <div className='bg-blue-300'>
    cool
  </div> 
}

And lastly (where I believe my problem is) index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

body{
    background-color: red; /* I WORK FYI! */
}

(EDIT) A bit more info: This app is the 'example-app' generated after running using create-react-library . I just created a brand new react app, installed TW, and had no problems. I also installed another package into my example-app (react-icons) just to test that wasn't the issue but that works as expected.

Answer 1

Do you start the Tailwind CLI build process?

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch