我有一个使用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
}
})