语法错误：未知单词顺风导入语句不起作用

问题描述

在更改 tailiwind.config.js 之后，我经历了顺风 nextJs 配置。之后编译不起作用。它抛出以下错误。

error - ./src/assets/styles/global.css:3:1
Syntax error: Unknown word

  1 | @import 'tailwindcss/base';
  2 | @import 'tailwindcss/components';
> 3 | @import 'tailwindcss/utilities';
    |                                                              ^
  4 | @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
  5 | 
wait  - compiling...
error - ./src/assets/styles/global.css:3:1
Syntax error: Unknown word

  1 | @import 'tailwindcss/base';
  2 | @import 'tailwindcss/components';
> 3 | @import 'tailwindcss/utilities';
    |                                                              ^
  4 | @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
  5 | 
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|/Users/Anjula/slinc-frontend/node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[2].oneOf[6].use[1]!/Users/Anjula/slinc-frontend/node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[2].oneOf[6].use[2]!/Users/Anjula/slinc-frontend/src/assets/styles/global.css': No serializer registered for CssSyntaxError
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> webpack/lib/ModuleBuildError -> CssSyntaxError

这是 github 存储库： https://github.com/anjula-sack/slinc-frontend

解决方法

您的两种颜色在 tailwind.config.js 中有语法错误。只需删除 rgba 末尾的分号。

更新tailwind.config.js

改变

green: {
  100: 'rgba(14,197,65,0.8);',200: '#0EC541',300: '#0D9B35',},

由

green: {
  100: 'rgba(14,0.8)',

和

gray: {
  100: '#F6F5F1',200: '#F1EEEE',300: '#DFDFDF',400: 'rgba(196,196,0.3)',500: 'rgba(0,0.1)',600: '#C4C4C4',700: 'rgba(0,0.2)',800: 'linear-gradient(180deg,rgba(0,0.24) 45.04%,0) 72.07%);',

由

gray: {
  100: '#F6F5F1',0) 72.07%)',