tailwindcss doesn't work in react

[ggnu11]

[version]

• react : 17.0.2
• react-script : 4.0.3
• typescript : '5.0.2'
• styled-components : 5.3.3
• types/react : 17.0.0
• node : v16.19.0

(tailwindcss)

• autoprefixer : 10.4.20
• postcss : 8.4.47
• tailwindcss : 3.4.14

[tailwind settings]

• postcss.config.js

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

• tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [],
};

• index.css

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

• craco.config.js

const CracoAlias = require('craco-alias');
const path = require('path');
const CracoEsbuildPlugin = require('craco-esbuild');

module.exports = (env) => {
  const isDevelopmenet = env.env === 'development';

  return {
    config: {
      devtool: 'cheap-module-source-map',
    },
    eslint: {
      enable: isDevelopmenet,
    },
    typescript: {
      enableTypeChecking: isDevelopmenet,
    },
    webpack: {
      configure: (webpackConfig, { env, paths }) => {
        webpackConfig.module.rules.unshift(
          {
            test: /\.svg$/,
            use: [
              {
                loader: '@svgr/webpack',
                options: {
                  svgoConfig: {
                    plugins: [
                      {
                        removeViewBox: false,
                      },
                    ],
                  },
                },
              },
            ],
          },
          {
            test: /\.mjs$/,
            include: /node_modules/,
            type: 'javascript/auto',
          },
          {
            test: /node_modules[\/\\]@?reactflow[\/\\].*.js$/,
            include: /node_modules/,
            use: [
              {
                loader: 'babel-loader',
                options: {
                  presets: ['@babel/preset-env', '@babel/preset-react'],
                  plugins: [
                    '@babel/plugin-proposal-optional-chaining',
                    '@babel/plugin-proposal-nullish-coalescing-operator',
                  ],
                },
              },
            ],
          }
        );
        return webpackConfig;
      },
    },
    module: {
      rules: [
        {
          test: /.jsx?$/,
          include: [path.resolve(__dirname, 'src')],
          exclude: [path.resolve(__dirname, 'node_modules')],
          loader: 'babel-loader',
        },
        {
          test: /.css?$/,
          exclude: [],
          use: ['style-loader', 'css-loader', 'postcss-loader'],
        },
      ],
      rules: [
        {
          test: /\.mp3$/,
          use: {
            loader: 'url-loader',
          },
        },
        {
          test: /\.worker\.js$/,
          use: { loader: 'worker-loader' },
        },
      ],
    },
  };
};

• index.tsx
  import './index.css';

After setting it up like this <div className="text-amber-600">textss</div> I tested it with that code, but tailwindcss style is not applied. I used to use styled-component, but do I need to set up another setting to use tailwindcss here?

[UtkarshK95]

Check for the following :

if index.css is imported in index.tsx,
In craco.config.js, confirm you’ve got postcss-loader setup like: use: ['style-loader', 'css-loader', 'postcss-loader'].
Check tailwind.config.js - make sure all component paths are covered in content.
Clean up build: rm -rf node_modules build && npm install.
Inspect the element in browser dev tools. See if the Tailwind classes are showing but not applying.

and I don't think having both styled components and tailwind will cause a problem.

Also, can you provide a link to the repo so I can check in my local.

[ggnu11]

Thank you for the good way.
I downgraded Tailwindcss and added craco.config.js after installation, and tailwindcss was applied normally.

yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

However, since it is not the latest version, there are some things that the style cannot be applied.
I know that I only need to install postcss-loader to apply tailwindcss to the latest version, but I am looking for another way because my node version is low

Do you happen to know how to use the latest tailwindcss in my project version?