Styled jsx for React(vite config) + tailwind + postcss

Question

I have a React project and wanted to implement styled-jsx with postcss( eventually it can be sass, just want nesting to work in tag. Also want to add tailwindcss, and be able to use @apply or @screen directives inside style tag. In next.js there is no problem with it. That's, what I tried with React.

My vite.config.js:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [
    react(
      {
        babel: {
          babelrc: true,
        }
      }
    ),
  ],
});

The problem, there is that it cannot find postcss file, there is an error:

[styled-jsx-plugin-postcss] postcss failed with Error: No PostCSS Config found in

My postcss.config.cjs(as I use vite, there is cjs extension required:

module.exports = {
  plugins: {
    'postcss-import':{},
    'tailwindcss/nesting': {}, // sometimes I also use 'tailwindcss/nesting': 'postcss-nesting
    'postcss-preset-env': {
      stage: 1
    },
    tailwindcss: {},
    autoprefixer: {},
  }
}

For Next.js it works(ofcourse .babelrc looks different):

{
  "presets": [
    [
      "next/babel", {
        "styled-jsx": {
          "plugins": ["styled-jsx-plugin-postcss"]
        }
      }
    ]
  ]
}

Is there a way to make it work properly, and also how to remove warning/error:

Warning: Received `true` for a non-boolean attribute `jsx`.

I know that I can use styled-jsx/css, but it's unfortunately create both local and global css.