Question 241181 in CSS Question posted in
Some basic documentation can be found here.

Css – The `px-3` class does not exist. If `px-3` is a custom class, make sure it is defined within a `@layer` directive

I have a very simple tailwind.config.js file defined as follows:

const defaultTheme = require('tailwindcss/defaultTheme');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  presets: [],
  darkMode: 'media', // or 'class'
  theme: {
    fontFamily: {
      sans: ['var(--font-satoshi)', ...defaultTheme.fontFamily.sans],
    },
  },
  plugins: [
    require('tailwind-scrollbar')({ nocompatible: true }),
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms')
  ],
};

And I am using "typescript": "^5.1.6" with my create-react-app.

Now I am seeings these compile errors and no ideas why:

ERROR in ./src/screens/settings/Settings.screen.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/screens/settings/Settings.screen.css)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(2:3) /home/project/src/screens/settings/Settings.screen.css The `px-3` class does not exist. If `px-3` is a custom class, make sure it is defined within a `@layer` directive.

  1 | ul.list-container {
> 2 |   @apply flex flex-col px-3 md:px-10 pt-4;
    |   ^
  3 | }
  4 |

Any ideas why?

Tags:

2

Answers


  1. 0

    Make sure you are importing the tailwind utility classes into your main stylesheet. Something like this:

    @tailwind base;
@tailwind utilities;
@tailwind components;
    Login or Signup to reply.
  2. 0

    It looks like you have missed:

     @layer components {
 .ul.list-container {
    @apply flex flex-col px-3 md:px-10 pt-4;
 }}

    Here is an example from docs: https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search