tailwindcss, not working with react but finally fix it

!This note is written as self study note. There could be mistakes, errors.

From this post, I was having issue that my cloned version of code is not applied with tailwindcss when i do ‘npm start’. It means even there are tailwindcss classnames are explicitly written in html tags, it never apply to my local machine.

<div className="fixed top-0 left-0 h-screen w-16 flex flex-col
              bg-white dark:bg-gray-900 shadow-lg">
                
    <SideBarIcon icon={<FaFire size="28" />} />
     ...
</div>

So as you can see, classnames are perfect, but what i see from my browser was just plain html elements.

At first i looked through my ‘tailwind.config.js’ file since i thought maybe tailwind configuration has problem. First thing looked through purge cause ‘purge’ is used to eliminate effect of unused files for styling website. But since there was no purge variable, it was okay. Then I searched through ‘content’ variable since it indicates file path to look for, or apply tailwindcss. But it was okay too.

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  content: ['./src/**/*.{js,jsx}', './public/index.html'],
  darkMode: 'class', // class, 'media' or boolean
  theme: {
    extend: {
      colors: {
        gray: {
          900: '#202225',
          800: '#2f3136',
          700: '#36393f',
          600: '#4f545c',
          400: '#d4d7dc',
          300: '#e3e5e8',
          200: '#ebedef',
          100: '#f2f3f5',
        },
      },
      spacing: {
        88: '22rem',
      },
    },
  },
  plugins: [],
};sources:

Next, I uninstall and reinstall PostCSS and tailwind extension from vscode, but it didn’t worked at all.

Next, I tried this cmd prompt :

npx tailwindcss -i ./src/index.css -o ./src/style.css --watch 

I tried this because i thouht my problem stems from not following official docs. But then i got this error:

 ...\tailwindprac\tailwind-dashboard\node_modules\tailwindcss\peers\index.js:91395
        throw new Error('PostCSS plugin ' + plugin.postcssPlugin + ' requires PostCSS 8.\n' + 'Migration guide for end-users:\n' + 'https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users');
              ^

Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
    at Processor.normalize (...\tailwindprac\tailwind-dashboard\node_modules\tailwindcss\peers\index.js:91395:15)
    at new Processor (...\tailwindprac\tailwind-dashboard\node_modules\tailwindcss\peers\index.js:91298:25)
    at postcss (...\tailwindprac\tailwind-dashboard\node_modules\tailwindcss\peers\index.js:90824:10)
    at rebuild (...\tailwindprac\tailwind-dashboard\node_modules\tailwindcss\lib\cli.js:695:42)   
    at ...\tailwindprac\tailwind-dashboard\node_modules\tailwindcss\lib\cli.js:786:14
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Node.js v20.10.0

So i tried to download PostCSS8 with this command:

npm i -D postcss@8.1

But still didn’t solved.

However FINALLY this series of npm prompt redeem me :

npm uninstall tailwindcss postcss autoprefixer # erase these dependencies from package.json completely
npm install -D tailwindcss postcss@8.1 # and reinstall it
npx tailwindcss -i ./src/index.css -o ./src/style.css --watch 

And then, i go to ‘index.js’ file and changed import ‘./index.css’ to :

import './style.css';

And finally all worked.

npx tailwindcss -i ./src/index.css -o ./src/style.css --watch

‘— watch’ flag tells tailwindcss to watch the input file(index.css in this case) for changes. By running this prompt, tailwindcss will monitor the input file (index.css) and automatically reprocess it every time we make a change to the file. This is particularly useful during development as it means we don't need to manually rerun the tailwind command each time we update our css files. So tailwindcss watch index.css and if any change occured then it would be processed and updated to style.css

index.css file normally be like :

@tailwind uitilities;
@tailwind components;
@tailwind base;

resources :

Error: PostCSS plugin tailwindcss requires PostCSS 8

Installation - Tailwind CSS