Sage 10 and Tailwind CSS

sage
1

I recall downloading an earlier version of sage 10 and I was able to choose a css framework, like Tailwind or Bulma etc. I cloned down the latest sage 10 and that framework option seems to no longer be present, having followed the installation steps in the Github repo for that branch. The steps fro naming your theme also appear to be gone.

Is there a guide for installing tailwind?

2

The installer was from Sage 9. With Sage 10 using Mix, you can use the instructions on the tailwind docs:

1 Like
3

Thanks for the reply @Log1x! I appreciate it. I’m hoping to get further guidance here.

I’m getting closer. I’m currently stopped when running yarn start.

I get an error:
ERROR Failed to compile with 2 errors

These dependencies were not found:
* -!../../../node_modules/css-loader/dist/cjs.js??ref--5-2!../../../node_modules/postcss- 
loader/src/index.js??postcss0!./common/global in ./node_modules/css-loader/dist/cjs.js??ref--5- 
2!./node_modules/postcss-loader/src??postcss0!./resources/assets/styles/app.css
 * -!../../../node_modules/css-loader/dist/cjs.js??ref--5-2!../../../node_modules/postcss- 
loader/src/index.js??postcss0!bootstrap/scss/bootstrap in ./node_modules/css-loader/dist/cjs.js??ref--5- 
2!./node_modules/postcss-loader/src??postcss0!./resources/assets/styles/app.css

I’ve run yarn add --save css-loader and yarn add --save postcss-loader and no luck. I’ve tried remove node_modules and the yarn lock file and reinstalling but no luck.

Here’s a gist of my current webpack.mix.jx

4

It is likely an issue with your PostCSS plugin ordering.

  • Remove require('postcss-purgecss-laravel') – it’s not needed.
  • Remove the css-loader and postcss-loader you added – these will always be automatically installed/handled by Mix as needed. If you get an error message implying you should install them, something else is wrong.
  • Remove require('autoprefixer') – Mix includes this automatically.

Try something simple like this:

mix.postCss('resources/styles/app.css', 'dist/styles', [
  require('postcss-import')(),
  require('tailwindcss')('./tailwind.config.js'),
  require('precss')(),
])

precss more or less includes the plugins you were otherwise requiring 1 by 1.

You’re also always free to take advantage of the many Mix extensions out there such as https://laravel-mix.com/extensions/tailwindcss

Oh – and make sure you remove the Bootstrap imports in your app.css as they appear to be in your error log. FYI you do not have to use PostCSS with Tailwind – as someone who personally went down the PostCSS rabbit hole – I’d just stick with SCSS. Nested imports are too powerful to pass up.

mix
  .sass('resources/styles/app.scss', 'dist/styles')
  .options({
    processCssUrls: false,
    postCss: [
      require('tailwindcss')('./tailwind.config.js'),
    ]
  })
7 Likes
5

Awesome @Log1x. That got me passed the errors. =)

Thanks for the tip on precss, too. That seems to work a treat. Been banging my head on this for a bit.

1 Like
6

As of Tailwind 1.4 you no longer need purgecss separately configured either, you can handle that right in the Tailwind Config.

1 Like
7

Any hints how to use Tailwind for editor.css? Because this doesn’t work:

.editor-styles-wrapper > * {
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
}

I found https://github.com/m-e-h/postcss-editor-styles/blob/master/INSTALL.md#webpack, but can’t get it working.

8

For those of us that use SCSS it appears that mix has an issue with tailwinds (https://github.com/bholloway/resolve-url-loader/issues/28) that requires me to disable processCssUrls, it this a non-issue out of the box with Sage 10 or, when not of my own doing, something I need to be aware of in the Sage 10 workflow?

9

https://github.com/roots/sage/blob/master/webpack.mix.js#L40 we set it by default for sanity purposes

1 Like
10

This topic was automatically closed after 42 days. New replies are no longer allowed.