Can't get this to work.

[paulm17]

Hi, thanks so much for putting this together. Unfortunately I'm not able to get this to work.

Original CSS:

.wheelPoint {
  display: block;
  position: relative;
  top: calc(-25% - 2px);
  width: 3px;
  height: calc(50% + 4px);
  transform-origin: bottom center;
  background: #006dd2;
}
.wheelPoint:after {
  display: block;
  position: absolute;
  top: -2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #818589;
  transform: translate(-25%, 0);
  content: "";
}

Tailwinds:

<span
          className="relative block w-[3px] h-[calc(50%+4px)] top-[calc(-25%-2px)] bg-[#006dd2] origin-bottom

          after:pseudo-content-empty
          after:block
          after:absolute
          after:top-[-2px]
          after:w-[7px]
          after:h-[7px]
          after:rounded-md
          after:bg-[#818589]
          after:transform
          after:translate-[-25%, 0]"
          style={{ transform: `rotate(${props.value}deg)` }}
        ></span>

I can't get the after pseudo to appear on the span.

My config:

// tailwind.config.js
module.exports = {
  mode: "jit",
  purge: ["{app,pages}/**/*.{js,jsx,ts,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    cursor: {
      auto: "auto",
      default: "default",
      pointer: "pointer",
      wait: "wait",
      text: "text",
      move: "move",
      "not-allowed": "not-allowed",
      grab: "grab",
      grabbing: "grabbing",
    },
    customForms: (theme) => ({
      default: {
        checkbox: {
          "&:focus": {
            outline: "none",
            boxShadow: "none",
            borderColor: "none",
          },
        },
      },
    }),
    extend: {
      pseudoContent: {
        empty: "",
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [
    require("@tailwindcss/forms", "@tailwindcss/custom-forms", "@shimyshack/tailwindcss-pseudo-element-plugin"),
  ],
}

[jshimkoski]

I'll dig in and try to troubleshoot this over the weekend. This is a perfect advanced use case that I would love to ensure works.

Just wondering, can you try one of the other pseudo content types, other than empty, to see if they display as you'd expect? Maybe after:pseudo-content-space?

[jshimkoski]

Btw, empty is built in to the plug-in. I just saw that you added it to your config. You don't really need that.

All of the types listed in the read me are built in. I'll specify that more clearly.

Sorry about that.

[paulm17]

Still not seeing an after pseudo using after:pseudo-content-space.

No worries when you'll get to this. I'm just happy you took the time to build this plugin.

Many thanks!

[jshimkoski]

@paulm17 I can't seem to duplicate this issue.

This is what I tried:

<span
  class="transform rotate-[45deg] relative block w-[3px] h-[calc(50%+4px)] top-[calc(-25%-2px)] bg-[#006dd2] origin-bottom after:pseudo-content-empty after:block after:absolute after:top-[-2px] after:w-[7px] after:h-[7px] after:rounded-md after:bg-[#818589] after:transform after:translate-[-25%,0]"
></span>

And I tried this (Vue):

<span
        class="relative block w-[3px] h-[calc(50%+4px)] top-[calc(-25%-2px)] bg-[#006dd2] origin-bottom after:pseudo-content-empty after:block after:absolute after:top-[-2px] after:w-[7px] after:h-[7px] after:rounded-md after:bg-[#818589] after:transform after:translate-[-25%,0]"
        :style="{ transform: 'rotate(45deg)' }"
      ></span>

I'm wondering if the problem you are encountering has to do with the way you're putting rotate on the element within React?

[paulm17]

Even if I remove the style, which I can move into the class either way. I still don't see an after psudeo.

[jshimkoski]

Hmm...You have a space in your after:translate-[-25%, 0] class. There should be no spaces in the class names: after:translate-[-25%,0].

[jshimkoski]

A limitation of Tailwind's JIT at the moment is that all classes cannot contain whitespace (this is why my pseudo-element-plugin uses underscores that are replaced by spaces upon compilation). I'm not sure if they'll ever (or if they even can) fix that.

Let me know if removing that space fixes the issue.

[paulm17]

Nope. I even had

after:block after:pseudo-content-space

for a simple use-case and it doesn't work.

Looks like this doesn't work for me, for whatever reason.

Going to close this now and side step the issue with another hack.

Thanks for your time though, appreciate it.

[jshimkoski]

@paulm17 I made a change to variant handling that might have fixed the issue you were encountering.

Read the 1.0.3 release notes and the updated README for more information.

Can you run a quick test to see if it is working out for you?

[paulm17]

Sure. Let me give this update a try.

[paulm17]

Success! Many thanks for following up with it. I'm using BlitzJS, which uses NextJS under the hood and this plugin means I don't have to use module css. (which is annoying)

Although this may have been my issue (sorry about that). I decided to remove some of the other plugins when I changed depending on the new readme and then it worked.

It may be worth pointing this out in the readme.

My plugins before:

plugins: [
    require("@tailwindcss/forms", "@tailwindcss/custom-forms", "@shimyshack/tailwindcss-pseudo-element-plugin"),
  ],

now:

plugins: [
    require("@tailwindcss/forms"),
    require("@tailwindcss/custom-forms"),
    require("@shimyshack/tailwindcss-pseudo-element-plugin"),
  ],

Finally, do you have plans to support other pseudo elements? Like first-child, nth-child, checked, active. (not sure if tailwinds already supports the last two).

[jshimkoski]

Nice! I'm glad we were able to get this working.

Tailwind CSS already supports those other pseudo elements out of the box. See: https://tailwindcss.com/docs/configuring-variants

Hopefully, Tailwind CSS will eventually adopt the before and after pseudo elements and utility classes to deal with the necessary content: ... values (according to Adam Wathan though, that seems very unlikely). Until then, at least we have this plugin. 😀