Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mvdnbrk/laravel-mix-tailwindcss
Tailwind CSS wrapper for Laravel Mix.
https://github.com/mvdnbrk/laravel-mix-tailwindcss
extension laravel laravel-mix laravel-mix-plugin tailwindcss
Last synced: 2 months ago
JSON representation
Tailwind CSS wrapper for Laravel Mix.
- Host: GitHub
- URL: https://github.com/mvdnbrk/laravel-mix-tailwindcss
- Owner: mvdnbrk
- License: mit
- Created: 2019-05-25T11:21:41.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-01-20T12:21:16.000Z (almost 4 years ago)
- Last Synced: 2024-11-07T00:20:06.184Z (2 months ago)
- Topics: extension, laravel, laravel-mix, laravel-mix-plugin, tailwindcss
- Language: JavaScript
- Homepage: https://laravel-mix.com/extensions/tailwindcss
- Size: 51.8 KB
- Stars: 47
- Watchers: 3
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
# Laravel Mix Tailwind CSS
[![Latest Version on NPM][ico-version]][link-npm]
[![Software License][ico-license]](LICENSE.md)
[![StyleCI][ico-styleci]][link-styleci]
[![Total Downloads][ico-downloads]][link-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:
```bash
npm install mix-tailwindcss --save-dev
```
```bash
yarn add mix-tailwindcss --dev
```
Then require the extension in your Mix configuration:
```js
const mix = require('laravel-mix');
require('mix-tailwindcss');
...
```
Enable the extension by calling `tailwind()` in your Mix chain:
```js
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()`:
```js
mix.sass('resources/sass/app.scss', 'public/css')
.tailwind('./tailwindcss-config.js');
```
And you're done!
Don't forget to [add the Tailwind directives](https://tailwindcss.com/docs/installation/#2-add-tailwind-to-your-css) 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.
```js
mix.postCss('resources/css/app.css', 'public/css')
.tailwind();
```
## Contributing
Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.
## Security Vulnerabilities
Please review our [security policy](.github/SECURITY.md) on how to report security vulnerabilities.
## Credits
- [Mark van den Broek](https://github.com/mvdnbrk)
- [Jeffrey Way](https://github.com/JeffreyWay)
- [All Contributors](../../contributors)
## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.
[ico-downloads]: https://img.shields.io/npm/dt/mix-tailwindcss.svg?style=flat-square
[ico-license]: https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square
[ico-styleci]: https://github.styleci.io/repos/188557285/shield?style=flat-square&branch=master
[ico-version]: https://img.shields.io/npm/v/mix-tailwindcss.svg?style=flat-square
[link-downloads]: https://npmjs.com/package/mix-tailwindcss
[link-npm]: https://npmjs.com/package/mix-tailwindcss
[link-styleci]: https://github.styleci.io/repos/188557285