mix-tailwindcss

Tailwind CSS wrapper for Laravel Mix.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
mix-tailwindcss
4721.3.03 years ago5 years agoMinified + gzip package size for mix-tailwindcss in KB

Readme

<img src="https://laravel-mix.com/svg/laravel-mix-tailwindcss.svg" alt="Laravel Mix Tailwind CSS" width="200">

Laravel Mix Tailwind CSS
!Latest Version on NPMico-versionlink-npm !Software Licenseico-license !StyleCIico-stylecilink-styleci !Total Downloadsico-downloadslink-downloads
This extension provides instant Tailwind CSS support to your Mix builds.
Please make sure that you are using laravel-mix version 2.1 or higher.
This package works with Tailwind version 1.0 or higher but also with earlier versions.

Usage

You can install the package with npm or yarn:
npm install mix-tailwindcss --save-dev

yarn add mix-tailwindcss --dev

Then require the extension in your Mix configuration:
const mix = require('laravel-mix');

require('mix-tailwindcss');
...

Enable the extension by calling tailwind() in your Mix chain:
mix.sass('resources/sass/app.scss', 'public/css')
   .tailwind();

If you are using a custom configuration file name, you will need to specify it when calling tailwind():
mix.sass('resources/sass/app.scss', 'public/css')
   .tailwind('./tailwindcss-config.js');

And you're done!
Don't forget to add the Tailwind directives to your css entry file.

PostCSS with postcss-import

If you're not integrating any Sass, Less or Stylus stylesheets you can use the mix.postCss() method.
When the postcss-import plugin is installed, it will be automatically detected and applied to your build.
mix.postCss('resources/css/app.css', 'public/css')
    .tailwind();

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

License

The MIT License (MIT). Please see License File for more information.