Svelte + Tailwind项目报错：‘Semicolon or block is expected’求助

问题场景 #

在Svelte项目的组件中使用Tailwind的@apply编写全局样式时，focus:前缀的类引发语法错误：

<style global lang="postcss">
  input {
    @apply block border-black border-2 mb-4 p-2 outline-none focus:border-blue-500;
  }
</style>

报错信息：

Semicolon or block is expected

当前配置文件 #

postcss.config.cjs #

import tailwind from 'tailwindcss'
import tailwindConfig from './tailwind.config.cjs'
import autoprefixer from 'autoprefixer'

export default {
  plugins: [tailwind(tailwindConfig), autoprefixer]
}

tailwind.config.cjs #

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {},
  },
  plugins: [],
  content: ["./index.html", './src/**/*.{svelte,js,ts}'], // for unused CSS
  variants: {
    extend: {},
  },
  darkMode: 'media', // or 'media' or 'class'
}

vite.config.js #

import postcss from './postcss.config.cjs'
import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte()],
  css: {
    postcss
  }
})

报错原因及解决方法 #

原因1：变体类与普通类混合解析问题 #

focus:属于Tailwind的变体类，直接和普通类写在同一行@apply中时，Svelte的PostCSS处理器可能无法正确解析这种混合语法，触发语法报错。

解决方法1：拆分样式规则 #

将带变体的样式单独拆分到伪类块中，分开处理：

<style global lang="postcss">
  input {
    @apply block border-black border-2 mb-4 p-2 outline-none;
  }
  input:focus {
    @apply border-blue-500;
  }
</style>

原因2：PostCSS配置文件模块格式错误 #

postcss.config.cjs使用了ES模块的import语法，但.cjs后缀的文件默认被Node当作CommonJS模块处理，语法不兼容会导致PostCSS插件加载异常，间接影响Tailwind指令解析。

解决方法2：修正PostCSS配置的模块语法 #

将postcss.config.cjs改为CommonJS格式：

const tailwind = require('tailwindcss');
const tailwindConfig = require('./tailwind.config.cjs');
const autoprefixer = require('autoprefixer');

module.exports = {
  plugins: [tailwind(tailwindConfig), autoprefixer]
}

原因3：Vite中PostCSS配置传递方式问题 #

Vite的css.postcss直接导入.cjs文件时，可能存在模块格式不匹配的情况，导致PostCSS插件链无法正常初始化。

解决方法3：调整Vite的PostCSS配置方式 #

在vite.config.js中直接配置PostCSS插件，避免跨模块格式导入：

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  plugins: [svelte()],
  css: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer')
      ]
    }
  }
})

内容的提问来源于stack exchange，提问作者Nikolay Dyankov