Svelte + Tailwind: "需要分号或块"

Question

我有一个使用Tailwind的Svelte项目，其中一个组件有以下样式：

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

我遇到的错误是由于 focus: 类所引起的：

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
  }
})

- Nikolay Dyankov

---

这个回答解决了你的问题吗？"在Svelte-Kit的样式标签中使用Tailwind响应式类时出现“预期分号或块”错误" - undefined

我看到了那个答案，配置文件是特定于Svelte Kit的。 - undefined

Answer 1

这对我来说是有效的。

"files.associations": {"*.svelte": "html" }

我正在使用SvelteKit+PostCSS+Tailwind与Cursor作为IDE（我确信它也适用于VSCode）。所有的

- user3122702