Upgrade Tailwindcss from 2 to 3

Question

I followed up the migration guideline but I have a problem with configuration.

Warning (4:3) Nested CSS was detected, but CSS nesting has not been configured correctly. Please enable a CSS nesting plugin before Tailwind in your configuration.
See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting

Warning
(16:3) Nested CSS was detected, but CSS nesting has not been configured correctly. Please enable a CSS nesting plugin before Tailwind in your configuration.
See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting

Warning (2:3) Nested CSS was detected, but CSS nesting has not been configured correctly. Please enable a CSS nesting plugin before Tailwind in your configuration.
See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting

postcss.config.js

module.exports = {
  plugins: {
    "postcss-import": {},
    "tailwindcss/nesting": {},
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {}),
  },
};

tailwind.config.js

module.exports = {
  content: ["./public/index.html", "./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
    zIndex: {
      max: 9999,
    },
  },
  plugins: [],
};

package.json

   "scripts": {
    "start": "react-scripts start",
    "build:dev": "env-cmd -f .env.dev react-scripts build",
    "build:test": "env-cmd -f .env.test react-scripts build",
    "deploy": "npm install -g serve & npm install & npm run build:dev & serve -s build -p 9999",
    "test": "npm test",
  },

and also I have a problem with css files that includes sass like syntax

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

asset static/js/bundle.js 2.7 MiB [emitted] (name: main) 1 related asset
asset index.html 1.93 KiB [emitted]
asset asset-manifest.json 190 bytes [emitted]
cached modules 2.41 MiB [cached] 475 modules
runtime modules 28.5 KiB 14 modules
javascript modules 56.2 KiB
  modules by path ./src/components/ 11 KiB
    modules with warnings 6.54 KiB [warnings]
      ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-load
er/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/compo
nents/Header/header.css 1.67 KiB [built] [1 warning]

Any help will be appreciated.

Thanks

UPDATE: I renamed files from css to scss and it works.