无法运行苗条/顺风项目答案

【问题标题】：Unable to run svelte/tailwind project无法运行苗条/顺风项目
【发布时间】：2021-11-12 10:58:18
【问题描述】：

我创建了一个苗条的项目并设置了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(),
        
    ],
};
};

对这里可能出现的问题有什么想法吗？

谢谢

【问题讨论】：

标签： svelte tailwind-css

【解决方案1】：

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

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

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

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

【讨论】：