我无法让 Tailwind 运行 - 尝试了我所知道的一切

Question

I've been working on getting Tailwind to run for a good 6 hours. Got tailwind running on a more simple Nextjs/React/Typscript app, but I can't get it to run in this larger codebase.

I know I must be making a dumb mistake, but I just don't know where to look at this point.

tailwind.config.cjs

module.exports = {
  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

_app.js

import '../styles/globals.css'
import Menu from '../components/splash-menu';
import { AppWrapper } from '../context/dataContext';
import { UserWrapper } from '../context/userContext';


function MyApp({ Component, pageProps }) {
  return (
  <>
  <AppWrapper>
    <UserWrapper>
    <Component {...pageProps} />
    </UserWrapper>
  </AppWrapper>
  </>

  )
}

export default MyApp

package.json

{
  "name": "",
  "version": "1.0.0",
  "description": "A visualization and optimization insight tool for AWS Lambda",
  "main": "/dist/index.js/",
  "author": "",
  "scripts": {
    "clean": "rm dist/bundle.js",
    "compile-dev": "npx tsc -w",
    "compile-prod": "npx tsc",
    "build-dev": "webpack --mode development",
    "build-prod": "webpack --mode production",
    "start": "nodemon --es-module-specifier-resolution=node dist/server.js",
    "dev": "next dev -p 4000 & webpack serve --hot --mode development & nodemon --es-module-specifier-resolution=node dist/server/server.js",
    "test": "NODE_OPTIONS=--experimental-vm-modules npx jest --verbose --no-cache",
    "next-dev": "next dev -p 4000",
    "next-build": "next build",
    "ns": "next start",
    "next-lint": "next lint"
  },
  "keywords": [],
  "license": "ISC",
  "type": "module",
  "dependencies": {
    "-": "^0.0.1",
    "@aws-sdk/client-cloudwatch": "^3.78.0",
    "@aws-sdk/client-lambda": "^3.78.0",
    "@aws-sdk/client-sts": "^3.78.0",
    "@types/bcryptjs": "^2.4.2",
    "@types/recharts": "^1.8.23",
    "autoprefixer": "^10.4.7",
    "aws-sdk": "^2.1122.0",
    "axios": "^0.27.2",
    "bcrypt": "^5.0.1",
    "bcryptjs": "^2.4.3",
    "cors": "^2.8.5",
    "d3": "^7.4.4",
    "dotenv": "^16.0.0",
    "express": "^4.17.3",
    "moment": "^2.29.3",
    "mongoose": "^6.3.1",
    "next": "^12.1.5",
    "postcss": "^8.4.13",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "recharts": "^2.1.9",
    "sass": "^1.51.0",
    "save": "^2.5.0",
    "tailwindcss": "^3.0.24",
    "uuid": "^8.3.2",
    "webpack": "^5.72.0"
  },
  "devDependencies": {
    "@babel/core": "^7.17.9",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "@babel/preset-typescript": "^7.16.7",
    "@types/bcryptjs": "^2.4.2",
    "@types/cors": "^2.8.12",
    "@types/express": "^4.17.13",
    "@types/jest": "^27.4.1",
    "@types/mongoose": "^5.11.97",
    "@types/node": "^17.0.27",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@types/react-router-dom": "^5.3.3",
    "@types/regenerator-runtime": "^0.13.1",
    "@types/uuid": "^8.3.4",
    "babel-loader": "^8.2.5",
    "css-loader": "^6.7.1",
    "eslint": "8.14.0",
    "eslint-config-next": "12.1.5",
    "html-webpack-plugin": "^5.5.0",
    "jest": "^28.0.0",
    "nodemon": "^2.0.15",
    "sass-loader": "^12.6.0",
    "style-loader": "^3.3.1",
    "ts-loader": "^9.2.8",
    "ts-node": "^10.7.0",
    "typescript": "^4.6.3",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.8.1"
  }
}

globals.css

body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

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

* {
  box-sizing: border-box;
}

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

Answer 1

just add these three lines at the top of global.css instead of bottom.

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

body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

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

* {
  box-sizing: border-box;
}