Does it make sense to use sass or less with tailwind? about discuss HOT 6 CLOSED

I think there's still good reasons to combine Tailwind with a preprocessor like Less or Sass. We use Less for Tailwind's documentation for example just to make it easier to @import other files, as well as for simple nesting. We don't use any other features though, like variables or mixins or anything; not because we think they're bad, we just don't need them!

Another approach is to use cssnext, which is a PostCSS plugin that lets you use future facing CSS features which includes nesting, although with a slightly different syntax than you might be used to from preprocessors.

You can also use postcss-import to inline your imports, but it has a few limitations that make it sort of annoying vs. using something like Less, namely that it won't inline any imports that come aren't the first things to appear in a file. This is annoying because this sort of thing won't just work:

@tailwind preflight;

@import "components/buttons";

@tailwind utilities;

Instead, you have to wrap any non-import lines in their own file and import those, just so the file can be pure imports. So you'd make a whole file just for @tailwind preflight which isn't the worst but sort of annoying:

@import "tailwind/preflight";
@import "components/buttons";
@import "tailwind/utilities";

That said, I know @reinink is quite happily using CSSNext and postcss-import for his main Tailwind project, and I'd probably be tempted to do the same just to have one fewer tool in the mix. It's definitely true that when using Tailwind and approaching your CSS workflow the way Tailwind encourages that you won't use even a fraction of the features that Less or Sass have to offer 👍

from discuss.

Even more late to the party, but @bkmorse , while apply is amazing, the one thing I would really miss from SASS if I left it behind completely would be @import's ability to let me sanely (or insanely, I guess that's subjective) organize a lot of "customized tailwind components".

I was unsure how to pull it off, but thanks to the suggestion by @adamwathan I got it working great! Just making a separate scss file for each @tailwind directive so you end up with a main.css file that looks like this:

@import 'scss/tailwind/_preflight.scss';
@import 'scss/tailwind/_components.scss';

/**
 * Here you would add any of your custom classes; stuff that you'd
 * want loaded *before* the utilities so that the utilities could still
 * override them.
 */
@import 'scss/_base.scss';
@import 'scss/_cards.scss';
@import 'scss/_forms.scss';
/* blah blah blah */

@import 'scss/tailwind/_utilities.scss';

from discuss.

I guess that would depend on what you are doing. Tailwind does not hinder their use. If you run into a situation where Tailwind only way is not what you feel comfy writing, go ahead and use whatever else makes sense.

I would not approach tools with an exclusive use attitude. Tools matter but what matters most is what you are building. Be familiar with the tools and reach as needed.

That said, tailwind is one awesome Swiss knife and flexible to fill most CSS needs.

from discuss.

Here is my setup that is working with Tailwind v1.0 and Laravel Mix v3, and I expect it would work with v4 as well. While we're at it, I might as well show the config for Purge CSS too:

webpack.mix.js

const { mix } = require('laravel-mix'); // this will be slightly different in v4
const tailwindcss = require('tailwindcss');
const glob = require('glob-all');
const PurgecssPlugin = require('purgecss-webpack-plugin');

// Custom PurgeCSS extractor for Tailwind that allows special characters in
// class names.
//
// https://github.com/FullHuman/purgecss#extractor
class TailwindExtractor {
    static extract(content) {
        return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
    }
}

mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .options({
        processCssUrls: false,
        postCss: [tailwindcss('./tailwind.config.js')],
    });

mix.webpackConfig({
    plugins: [
        new PurgecssPlugin({

            // Specify the locations of any files you want to scan for class names.
            paths: glob.sync([
                path.join(__dirname, 'resources/assets/views/**/*.blade.php'),
                path.join(__dirname, 'resources/assets/js/**/*.vue'),
            ]),
            extractors: [
                {
                    extractor: TailwindExtractor,

                    // Specify the file extensions to include when scanning for
                    // class names.
                    extensions: ['html', 'js', 'php', 'vue'],
                },
            ],
        }),
    ],
});

app.scss

@tailwind base;

/*! purgecss start ignore */

@import 'your/stuff';
@import 'your/things';

.custom {
    @apply .bg-grey-400;
}

/*! purgecss end ignore */

@tailwind utilities;

NOTE: the ! is needed in the purgecss comment otherwise they will be stripped in production mode because annotations are removed there by Webpack. The Purge CSS ignore effectively whitelists the part in between them, which I find useful for preserving vendor CSS.

Additionally, you could add something like this into your glob.sync([]) array:

                path.join(__dirname, 'node_modules/radical-library-name/**/*.vue'),

Running Tailwind and SASS together nets a 700kb CSS file for me with this config, but with the addition of Purge CSS, it drops to 92kb which is 15kb gzipped, so basically it's worth your time to investigate it.

from discuss.

You definitly can use it with SASS or Less.

PostCSS has all possibilities to do whatever you want. This is because it's a full featured language (Javascript) with an AST (Abstract syntax tree).

You can do whatever you want, the possibilities are great.

That said, if you're not familiar with javascript (like I am) or you're just better in using Sass for some of your tasks for more complex tasks, e.g. loops or whatever I'd recommend to just use that.

I switched to PostCSS only. And with awesome tools like Variables, Nested (use with care), etc you can add your favorite flavor.

I like postcss very much and I'm so happy that the Tailwind-Team decided to use it over Less.

from discuss.

Late to the dinner party but use this https://tailwindcss.com/docs/extracting-components/

from discuss.