tailwindlabs / discuss

A place to ask questions, get help, or share what you've built with Tailwind CSS.
MIT License
171 stars 9 forks source link

apply cannot be used with custom plugins #212

Open ashutoshSce opened 5 years ago

ashutoshSce commented 5 years ago

Using this plugin Transforms Tailwind CSS Plugin.

Not able to use @apply to mix-in the contents of existing classes into my custom class in SCSS file

 .back-blue{
       @apply transform-scale-100 transform-rotate-360;
  }

For native tailwind class names @apply is working fine.

Using below packages to generate css file. laravel-mix laravel-mix-tailwind

in file webpack.mix.js

const mix = require('laravel-mix');
require('laravel-mix-tailwind');
mix.sass('resources/sass/app.scss', 'public/css')
    .tailwind();

I am getting below error message

(103:3) @apply cannot be used with .transform-scale-100 because .transform-scale-100 either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .transform-scale-100 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.

adamwathan commented 5 years ago

This should work in the latest version, are you on 0.7.3? On Wed, Jan 9, 2019 at 5:13 PM Ashutosh Kumar Jha notifications@github.com wrote:

Using this plugin Transforms Tailwind CSS Plugin https://github.com/benface/tailwindcss-transforms#transforms-tailwind-css-plugin .

Not able to use @apply https://github.com/apply to mix-in the contents of existing classes into my custom class in SCSS file

.back-blue{ @apply transform-scale-100 transform-rotate-360; }

For native tailwind class names @apply https://github.com/apply is working fine.

Using below packages to generate css file. laravel-mix https://github.com/JeffreyWay/laravel-mix laravel-mix-tailwind https://github.com/JeffreyWay/laravel-mix-tailwind

in file webpack.mix.js

const mix = require('laravel-mix'); require('laravel-mix-tailwind'); mix.sass('resources/sass/app.scss', 'public/css') .tailwind();

I am getting below error message

(103:3) @apply cannot be used with .transform-scale-100 because .transform-scale-100 either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .transform-scale-100 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.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/tailwindcss/discuss/issues/212, or mute the thread https://github.com/notifications/unsubscribe-auth/AEH3bASHDoderlClskAJO7uy9YdgLkz9ks5vBlDZgaJpZM4Z4JZ0 .

ashutoshSce commented 5 years ago

Yes @adamwathan "tailwindcss": "^0.7.3"