where can I use @apply in a vue-cli app?

[mark-hahn]

I'm building a vue-cli app. @apply doesn't seem to work in any file I can find. This is my test css ...

.markdown > h1,
h1.markdown {
  @apply mb-1;
  @apply leading-none;
  @apply text-gray-900;
  @apply font-light;
  @apply text-3xl;
}

I've tried it in index.css, tailwind.css, and in the styles section of a vue component. I've also put it in a file and tried importing it in my main js file ...

import './assets/styles/index.css'
import './assets/css/tailwind.css'
import './assets/css/markdown.css'

What am I missing?

[adamwathan]

Here's an example of a vue-cli app that's configured correctly for @apply to work:

https://github.com/tailwindcss/designing-with-tailwindcss/tree/master/04-building-a-dropdown-menu/01-styling-the-basic-dropdown-elements

Not sure what part you're missing but you should be able to at least trace down the differences.

[mark-hahn]

Thanks for replying quickly to all my posts.

I ran that example project and it worked. I've gone through each file and made sure mine was set up the same way with no luck. I'm considering starting with that project and replacing things with my code slowly and watch for breakage.

I'll post my findings here to maybe help others.

[adamwathan]

Can you post your project on GitHub? Happy to take a look.

[mark-hahn]

Wow, quite an offer. It's already public on GitHub at https://github.com/eridien/p4-client but you probably won't be able to run it because is depends on websockets to custom equipment. If you try to read it let me know if it is too huge/messy and I'll pare it as much as I can.

I'm a newbie so please be easy on my code quality. :-)

[mark-hahn]

I have gotten the sample app to work with markdown and your markdown CSS. So I know the process and it works. I will now add my code in slowly.

I'm closing this but I might check in with anything I find.

[mark-hahn]

It was a stupid bug (I've never met a smart bug). I had the markdown class in the wrong part of the DOM. Sorry for the trouble.