I went through the tailwind nextJs configuration after that I changed the tailiwind.config.js. After that the pilation doesn't work. It throws the following error.

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

  1 | @import 'tailwindcss/base';
  2 | @import 'tailwindcss/ponents';
> 3 | @import 'tailwindcss/utilities';
    |                                                              ^
  4 | @import url(';display=swap');
  5 | 
wait  - piling...
error - ./src/assets/styles/global.css:3:1
Syntax error: Unknown word

  1 | @import 'tailwindcss/base';
  2 | @import 'tailwindcss/ponents';
> 3 | @import 'tailwindcss/utilities';
    |                                                              ^
  4 | @import url(';display=swap');
  5 | 
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|/Users/Anjula/slinc-frontend/node_modules/next/dist/piled/css-loader/cjs.js??ruleSet[1].rules[2].oneOf[6].use[1]!/Users/Anjula/slinc-frontend/node_modules/next/dist/piled/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

Here's the github repo:

I went through the tailwind nextJs configuration after that I changed the tailiwind.config.js. After that the pilation doesn't work. It throws the following error.

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

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

  1 | @import 'tailwindcss/base';
  2 | @import 'tailwindcss/ponents';
> 3 | @import 'tailwindcss/utilities';
    |                                                              ^
  4 | @import url('https://fonts.googleapis./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/piled/css-loader/cjs.js??ruleSet[1].rules[2].oneOf[6].use[1]!/Users/Anjula/slinc-frontend/node_modules/next/dist/piled/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

Here's the github repo: https://github./anjula-sack/slinc-frontend

• javascript
• typescript
• next.js
• tailwind-css
• css-loader

• I don't see the question. – Filip Seman Commented May 13, 2021 at 16:09

1 Answer 1

Two of your colors have syntax errors in tailwind.config.js. just remove the semicolon at the end of rgba.

update tailwind.config.js by

changing

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

by

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

and

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

by

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