@tailwind base; Unknown word for vite

Question

I am trying to integrate tailwindcss with postcss in Electron-vite.

I have run commands -

yarn add electron-vite -D

yarn create @quick-start/electron

yarn add -D tailwindcss postcss autoprefixer

npx tailwind init -p

But when I run the code using yarn dev it is showing error:-

I don't know how to resolve this,

This is the code in electron.vite.config.ts file

import react from '@vitejs/plugin-react'
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import { resolve } from 'path'

export default defineConfig({
  main: {
    plugins: [externalizeDepsPlugin()],
    resolve: {
      alias: {
        '@/lib': resolve('src/main/lib'),
        '@shared': resolve('src/shared')
      }
    }
  },
  preload: {
    plugins: [externalizeDepsPlugin()]
  },
  renderer: {
    assetsInclude: 'src/renderer/src/assets/**',
    resolve: {
      alias: {
        '@renderer': resolve('src/renderer/src'),
        '@shared': resolve('src/shared'),
        '@hooks': resolve('src/renderer/src/hooks'),
        '@/assets': resolve('src/renderer/src/assets'),
        '@/store': resolve('src/renderer/src/store'),
        '@/components': resolve('src/renderer/src/components'),
        '@/mocks': resolve('src/renderer/src/mocks')
      }
    },
    plugins: [react()]
  }
})

I have already tried changing the @tailwind directives to use import statements but that doesn't seem to work.

Answer 1

Actually I was actually pointing to my main.css file in assetsInclude: 'src/renderer/src/assets/**',

Thus changing it to:- assetsInclude: 'src/renderer/assets/**', Here it not pointing to anything.

This helped me to run my code