Issue with Tailwind CSS when applying @apply directive

click here

Hello all, I am currently working on a Nextjs project and attempting to utilize the @apply processor. However, I am encountering an error message as shown above.

This is my package.json:

{
  "name": "simon-bask-health-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "prepare": "husky install"
  },
  "dependencies": {
    "-": "^0.0.1",
    "@react-google-maps/api": "^2.19.2",
    "chart.js": "^4.4.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-prettier": "^5.0.0",
    "flowbite": "^1.8.1",
    "flowbite-react": "^0.6.4",
    "husky": "^8.0.3",
    "lint-staged": "^14.0.1",
    "next": "13.5.4",
    "path": "^0.12.7",
    "react": "^18",
    "react-chartjs-2": "^5.2.0",
    "react-dom": "^18",
    "save-dev": "^0.0.1-security"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10",
    "eslint": "^8",
    "eslint-config-next": "13.5.4",
    "postcss": "^8.4.31",
    "prettier": "^3.0.3",
    "prettier-plugin-tailwindcss": "^0.5.5",
    "tailwindcss": "^3",
    "typescript": "^5"
  }
}

Here is a snippet from my tailwind config file:

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./node_modules/flowbite-react/**/*.js",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        textColor: "#111",
      },
      fontFamily: {
        inter: ["var(--font-inter)"],
        sulphur: ["var(--font-sulphur-point)"],
        roboto: ["var(--font-roboto)"],
      },
      backgroundColor: {
        buttonBackgroundColor: "#404040",
        hoverButtonBackgroundColor: "#000",
      },
    },
  },
  plugins: [require("flowbite/plugin")],
};
export default config;

Now let's take a look at my postcss config file:

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

In my global.css file, I have used @apply to style the h1 element:

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  margin: 0;
}

button {
  cursor: pointer;
}

h1 {
  @apply text-sm;
}

@layer {
  //Classes to hide scroll bar
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  .scrollbar-hide {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; 
  }
}

I would greatly appreciate any assistance in resolving this issue. Thank you.

I have attempted reinstalling all required packages but the problem persists.

next.jstailwind-csspostcss

Answer №1

It appears that the issues are not associated with @apply but rather with this particular line:

//Code to conceal scroll bar

You seem to be attempting to use Sass-style comments by commencing the line with two forward slashes (//), however, this is not valid CSS syntax. Instead, try using /* and */ to encapsulate the comment text:

/* Code to hide scroll bar */

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Successfully resolving the API without encountering any response errors, even after sending a response

Once the data is successfully saved in the database and the image upload is completed, I am attempting to send res.json. However, I keep encountering the error message API resolved without sending a response for /api/auth/registeration, this may result in ...

javascriptnode.jsnext.jsformidable

Enforce the use of "www" in your Next.js project

How can I consistently enforce www in my next.js project? I attempted to do this in the htaccess file, but it was not successful. Can anyone offer assistance? ...

.htaccesswebnext.js

Issue: The mandatory parameter (slug) was not provided in string format in the getStaticPaths method for the endpoint /posts/[slug]

In my project, I have a [slug].js file with the following code: import Head from "next/head"; import PostContent from "../../components/posts/post-detail/post-content"; import { getPostByName, getAllPosts } from "../../helpers/api- ...

next.js

The absence of a `require` definition in Typescript combined with daisyui

Considering using typescript with react and daisyUI (a tailwindCSS component). Just a heads up, I'm currently utilizing vite In my ts.config file, I've specified node as moduleResolution Encountering an error in the tailwind config stating &apo ...

reactjstypescripttailwind-cssdaisyui

It appears that the Next.js environment variables are not defined

Upon setting up a fresh next.js project using npx create-next-app@latest and configuring some environment variables in the .env.local file, I encountered an error when attempting to run the server. "Failed to load env from .env.local TypeError: Cannot ...

javascriptreactjsnext.jsenvironment-variables

What is the best way to set up a session in a Next.js project?

I am currently utilizing Next js for my project development. I've successfully crafted a unique signup form within the platform where users can input their email and password, followed by an OTP being sent to their email address for verification purpo ...

reactjsnext.js

What is the best way to send an API request from a React frontend to my Next.js backend running on localhost?

I have currently developed a create react app and I am interested in creating a next.js backend for it. I have set up an API route on the server-side which will fetch data from another API and generate a response accordingly. I do not want to fully migrate ...

node.jsrestnext.jscreate-react-app

Tips for creating consistent spacing between elements using Tailwind CSS version 3

I am currently utilizing Tailwind CSS in conjunction with next.js for my project. I have a total of 8 images, each varying in size, and my goal is to display 4 images per row on medium and large devices, while displaying 2 images per row on small devices. ...

cssreactjsnext.jstailwind-csstailwind-3

Updating a specific element within a list using AWS DynamoDB

In my DynamoDB database, I have the following table structure: { UserId: "123456", Orders: [ { OrderId: "ORD123", OrderRef: "Christmas presents", OrderStatus: 0, ...

next.jsamazon-dynamodb

Utilizing various Tailwind configuration files in a single NextJS project

Is it feasible to implement two separate configurations (tailwind.css) for two distinct NextJS layouts? I am looking to have a frontend-tailwind.js and a backend-tailwind.js in order to create two unique style sheets - backend.scss and frontend.scss withi ...

reactjsnext.jstailwind-css

What is preventing MenuItemLink from being displayed in the menu?

I have created a unique page for users to purchase subscriptions, but I am having trouble accessing that page because the button is not appearing in the menu. I followed the steps outlined in the official guide, but only the dashboard and resources buttons ...

reactjstypescriptnext.jsreact-admin

Is it possible to update the button text upon clicking using grommet?

I'm looking for advice on how to update a button label when clicked in Grommet UI with styled components. Would it be simpler to create a custom button instead of using Grommets? ...

reactjsnext.jsstyled-componentsgrommet

Validation errors in the realm of Zod

Below is my code using Next.js 14 with TypeScript, React Hook Form, and Zod for validation. The issue arises when trying to display an error message for an empty form: import React from "react"; import category from "@/components/expenses/ca ...

reactjstypescriptnext.jsnext.js13zod

The unique font I have set up is not displaying correctly on Safari or iOS devices, however, it is functioning properly on Chrome and Firefox when using

This is my first time seeking help on stackoverflow. I have been struggling to understand why the font on my website doesn't display correctly in Safari or any browser on IOS devices, even though it appears fine on Chrome, Firefox, and other browsers. ...

next.jsbrowserfontssafaricross-browser

Encountering the error message 'XMLHttpRequest is not defined' while incorporating getServerSideProps() in NextJS

I'm currently exploring NextJS with SSR and encountering an error when trying to fetch data from a Spotify playlist using the spotify-web-api-js library. This issue only occurs when executing on the server side: error - ReferenceError: XMLHttpRequest ...

javascriptreactjsnext.jsserver-side-rendering

Issue with Loading Images, Js, and Css After Build: All Files Returning 404 Error

As I endeavor to launch my latest 13 app, everything seems fine during the build process with no errors. However, when attempting to access the app, only HTML content appears, and a 404 error is displayed for Js, Css, and images (as evident in the network ...

dockernext.js

Issues concerning the application of Nextjs and tailwind styling have arisen

My goal is to achieve a scroll effect where my navbar changes color as the user scrolls down the page. However, I am currently facing an issue where the colors are not registering inside the ('') and the navbar remains white (#ffffff) regardless ...

reactjsnext.jstailwind-css

`Drizzle ORM and its versatile approach to SELECT statements`

Looking to improve the handling of options in a function that queries a database using Drizzle ORM. Currently, the function accepts options like enabled and limit, with potential for more options in the future. Here's the current implementation: type ...

sqltypescriptnext.jsdrizzle

Activate trust proxy in Next.js

When working with Express.js, the following code snippet enables trust in proxies: // see https://expressjs.com/en/guide/behind-proxies.html app.set('trust proxy', 1); I am attempting to implement a ratelimit using an Express middleware that is ...

javascriptnode.jsnext.js

Finding the Node.js log location during deployment in Heroku

My Node app on Heroku is giving me trouble. It deploys without any errors, but it crashes right at the start. The log provided below doesn't point to the issue clearly. When I try to access the suggested log at .npm/_logs/2021-04-22T19_59_52_474Z-debu ...

node.jsherokunext.jsnodes