Less with Tailwindcss

[9585999]

npm list --depth=0

├── axios@0.18.0
├── browser-sync@2.24.6
├── browser-sync-webpack-plugin@2.2.2
├── cross-env@5.2.0
├── laravel-mix@2.1.11
├── less@3.8.1
├── less-loader@4.1.0
├── lodash@4.17.10
├── postcss-discard-comments@4.0.0
├── postcss-unprefix@2.1.3
└── tailwindcss@0.6.5

node -v v10.8.0

npm -v 6.4.0

Hi, I want to use Less with TailwindCss, and I'd like to work with @import (less, reference) '~ tailwindcss / utilities.css' with &:extend(.tailwind-utilites), but apparently at the time of compilation Less, css selectors do not exist yet, and on the output I get an empty public/css/app.css ...

at the moment I first compile css, then Less, but this approach is clearly not what I need, since it has many shortcomings ...

// app.less

@import (less) '~public/css/tailwind/preflight.css';
@import (less, reference) '~public/css/tailwind/utilities.css';
@import (less, reference) '~public/css/tailwind/components.css';

.foo {
  &:extend(.bg-red);
}

// webpack.mix.js

mix.setPublicPath('public').tailwindCss()
    .js('resources/assets/js/app.js', 'public/js')
    .postCss('node_modules/tailwindcss/preflight.css', 'css/tailwind')
    .postCss('node_modules/tailwindcss/utilities.css', 'css/tailwind')
    .postCss('node_modules/tailwindcss/components.css', 'css/tailwind')
    .less('resources/assets/less/app.less', 'public/css')

Perhaps someone has a more elegant solution to this problem?

[adamwathan]

There's no way you'll ever be able to access Tailwind's classes during the Less stage of compilation in any sane way because like you mentioned Tailwind is meant to run during the PostCSS step.

For your specific situation I would recommend using Tailwind's @apply feature:

https://tailwindcss.com/docs/functions-and-directives#apply

...instead of using &:extend in Less, because extend is sort of an anti-pattern and mixins are better for performance anyways.

[9585999]

@adamwathan thanks for your reply.