Tailwindcss: .outline-none class missing in stylesheet

[madsem]

No matter what I try, I simply can't get the .outline-none to work, it's not included in my stylesheet.

I'm running the newest Tailwindcss version 0.7.3

Here is my app.scss

// Import Preflight and Components
@tailwind preflight;
@tailwind components;

// Import Custom Mixins
@import "mixins";

// Import Custom Classes
@import "components/all";
@import "utilities/all";
@import "layouts/all";

// Import Utilities
// TailwindCSS recommends leaving utilities till last to ensure they aren't overwritten.
@tailwind utilities;

The modules.export in my tailwind.config.js

...
outline: ['focus'],
...

My Gulp task

/**
 * Compile Tailwind [DEV]
 *
 * @since 1.0.0
 */
gulp.task('css:compile', function () {
    return gulp.src('./assets/styles/app.scss')
        .pipe(sass())
        .pipe(postcss([
            tailwindcss('./tailwind.config.js')
        ]))
        .pipe(rename({
            extname: '.css'
        }))
        .pipe(gulp.dest('css/'))
        .pipe(notify(
            {
                message: 'Tailwind compiled'
            }
        ));
});

Please help to save my brain, cause I'm bashing my head really hard against the wall here :)
Is it a bug?

[adamwathan]

Are all the other utilities generating? You can see that style does exist even in our CDN builds:

https://unpkg.com/[email protected]/dist/tailwind.css

Can you share a repo that reproduces the issue? Gotta be some annoying stupid little thing that's just too easy to miss when you've been bashing your head against it for too long.

[madsem]

Hey @adamwathan

Thanks! :)

Here is a repo, just add the html to the templates/default.html & run a build.

<form action="" autocomplete="off">
            <div class="flex items-center">
                <input class="h-12 appearance-none border-red border-t-2 border-b-2 border-l-2 w-2/3 p-2 text-grey-darker leading-tight focus:outline-none rounded-tl rounded-bl" type="text" placeholder="Search..." aria-label="Search Field">
                <button class="h-12 w-1/3 flex-no-shrink bg-red hover:bg-red-dark border-red-dark text-sm border-2 text-white text-bolder rounded-tr rounded-br" type="button">
                    Search
                </button>
            </div>
        </form>

https://github.com/madsem/statamic-gust-theme

[tlgreg]

That repo uses tailwindcss 0.5.3, outline was added in 0.6.0.

[madsem]

geez :( thanks @tlgreg, you're right.
I thought that "^0.5.3" would actually automatically update to the most recent major version.

After I adjusted that, it worked and I get all classes in my stylesheet now :)
Closing this.

[tlgreg]

Just a note, this is due to tailwind being in a pre-1.0 state. Caret versioning (^) according to semver means 0.x.x minor releases can have breaking changes. After 1.0.0 it would actually install the latest minor release for that major version.