Tailwindcss: @apply space-x-* or space-y-* not working

[djrasmusp]

When trying to use space-x-* or space-y-* I get an build error say:

Syntax error: @apply cannot be used with .space-x-4 because .space-x-4 either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .space-x-4 exists, make sure that any @import statements are being properly processed before Tailwind CSS sees your CSS, as @apply can only be used for classes in the same CSS tree.

The classes gets build in the css file, if I dont purge first, but it can be used with @apply

Im using Tailwindcss 1.4.6

[estevanmaito]

Are you using any preprocessor? Could you share your tailwind.config.js and the file you import Tailwind styles (the @tailwind or @import rules)?

[djrasmusp]

Im using autoprefixer and postcss...

And my config.js file looking like this :

const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
  purge: {
    enabled: false,
    content: ['../../views/**/*.php'],
  },
  theme: {
    extend: {
      colors: {
        'primary': '#f7941d',
        'secondary': '#9a0f0d',
        'facebook': '#4267B2',
        'instagram': '#E1306C',
        'snapchat': '#FFFC00',
        'spotify': '#1DB954',
        'youtube': '#FF0000',
      },
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
      gridTemplateColumns: {
        'content': '1fr 30%',
      },
      gridTemplateRows: {
        '25': 'repeat(25, minmax(0, 1fr))',
      },
      gridRow: {
        'span-7' : 'span 7 / span 7',
      },
      boxShadow: {
        'widget-outline': '#f4f5f7 0 -3px 0 inset',
        'sidebar-widget-outline': '#fbfdfe 0 -3px 0 inset',
        'widget-focus': '#f7941d 0 -3px 0 inset',
      }
    }
  },
  plugins: [
    require('@tailwindcss/ui')
  ]
}

And my import file

@tailwind base;
@import "common/variables";

@tailwind components;

@import "common/global";
@import "components/buttons";
@import "components/comments";
@import "components/cookie_notice";
@import "components/forms";
@import "components/nowplaying";
@import "components/timetable";
@import "components/widgets";
@import "components/wp-classes";
@import "layouts/header"; <-- where i tried adding it 
@import "layouts/sidebar";
@import "layouts/footer";
@import "layouts/pages";
@import "layouts/posts";
@import "layouts/tinymce";

@tailwind utilities;

But maybe the problem lies in the TailwindUI rather than tailwindcss

---

Update: just tested with only Tailwindcss getting the same error

[Landish]

Having the same issue.

Does not work divide utilities also.

[estevanmaito]

Oh, I see it!

You're using an utility before it's available: https://tailwindcss.com/docs/using-with-preprocessors/#build-time-imports

Your @import "layouts/header"; makes use of space-x-*, but it is only available after @tailwind utilities or @import "tailwindcss/utilities";

Move the utilities up or your imported file below it.

[adamwathan]

Duplicate of https://github.com/tailwindcss/tailwindcss/issues/1599.

[xaralis]

I still cannot make this working. I have ridiculously simple rule:

.social-icon-group {
  @apply space-x-1;
}

And have this included after utilities:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/**
* Custom components
*/
@import "./molecules/social-icon-group.pcss";

But my build still fails claiming:

Message:
    /Users/xaralis/Workspace/pirati-ui/source/css/molecules/social-icon-group.pcss:2:3: `@apply` cannot be used with `.space-x-1` because `.space-x-1` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.space-x-1` exists, make sure that any `@import` statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.

  1 | .social-icon-group {
> 2 |   @apply space-x-1;
    |   ^
  3 | }
  4 |

Can you help me?

[estevanmaito]

Did you read the issue in the comment exactly above yours?

Duplicate of #1599.

[xaralis]

Did you read the issue in the comment exactly above yours?

Duplicate of #1599.

I did but didn't fully understood what the result is. Does it mean that @apply can't be used in combination with space-* utils? If that's the case, it should be clearly mentioned in the docs.

Thanks

[tjkohli]

I have the same exact issue.

Loading:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

and then

nav {
    @apply space-x-5 flex tracking-widest;
}

giving the error:

`@apply` cannot be used with `.space-x-5` because `.space-x-5` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.space-x-5` exists, make sure that any `@import` statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.

Any thoughts?

[adamwathan]

Please see this issue it explains it all:

https://github.com/tailwindcss/tailwindcss/issues/1599

This just doesn’t work and will not work any time soon, it’s a limitation of @apply.

[nomadboy20]

any fix

[adamwathan]

See experimental feature here:

https://github.com/tailwindlabs/tailwindcss/pull/2159