Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Tailwind running with Next gives a syntax error

Tags:

tailwind-css

./node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[3].oneOf[7].use[1]!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[3].oneOf[7].use[2]!./node_modules/next/dist/compiled/resolve-url-loader/index.js??ruleSet[1].rules[3].oneOf[7].use[3]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[3].oneOf[7].use[4]!./styles/style.scss
/home/user/node_modules/color/index.js:257
            lum[i] = (chan <= 0.039_28) ? chan / 12.92 : ((chan + 0.055) / 1.055) ** 2.4;
                              ^^^^^

SyntaxError: Invalid or unexpected token
like image 985
Thierry M Avatar asked Sep 05 '21 18:09

Thierry M


People also ask

What is @tailwind and how does it work?

Tailwind will automatically move any CSS within a @layer directive to the same place as the corresponding @tailwind rule, so you don’t have to worry about authoring your CSS in a specific order to avoid specificity issues.

How to set up tailwind CSS in PostCSS?

Setting up Tailwind CSS 1 Install Tailwind via npm. Next.js v9 and older don’t support PostCSS 8 yet so you need to install the Tailwind CSS v2.0 PostCSS 7 compatibility build for now as we’ve ... 2 Create your configuration files. ... 3 Configure Tailwind to remove unused styles in production. ... 4 Include Tailwind in your CSS. ...

How do I use Tailwind in my markup?

Use Tailwind’s utilities directly in your markup the way they are intended to be used, and don’t abuse the @apply feature to do things like this and you will have a much better experience. Tailwind adds a few custom functions you can use in your CSS to access Tailwind-specific values.

What are tailwind directives?

A reference for the custom functions and directives Tailwind exposes to your CSS. Directives are custom Tailwind-specific at-rules you can use in your CSS that offer special functionality for Tailwind CSS projects.


Video Answer


1 Answers

Looks like it's a node version issue. https://github.com/tailwindlabs/tailwindcss/issues/921

Use Node 14 for example

like image 134
Gianfranco P. Avatar answered Oct 16 '22 14:10

Gianfranco P.