无法运行svelte/顺风项目

Question

我创建了一个svelte项目并设置了tailwindui，当我尝试启动该项目时，我得到了这个错误：

postcss.config.js:1
[1] import tailwind from 'tailwindcss'
[1] ^^^^^^
[1]
[1] SyntaxError: Cannot use import statement outside a module

我也得到了这个错误：

[0] [!] (plugin svelte) ParseError: Unexpected character '@'
[0] src/App.svelte
[0] 1: <script>
[0] 2:   @tailwind base;
[0]      ^
[0] 3:   @tailwind components;
[0] 4:   @tailwind utilities;
[0] ParseError: Unexpected character '@

这是我的postcss.config.css文件：

import autoprefixer from 'autoprefixer'
import nesting from 'postcss-nesting'

export default  {
    syntax: 'postcss-scss',
    plugins: [
        nesting(),
        tailwind(),
        autoprefixer(),
        
    ],
};
};

对这里可能存在的问题有什么想法吗？

谢谢

Answer 1

您的postcss.config.js应该如下所示，如tailwindcss docs所示

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

要修复第二个错误，您必须将所有tailwindcss导入放在一个样式标记中，如下所示：

<style>
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>