├── .editorconfig ├── .github ├── CONTRIBUTING.md ├── FUNDING.yml └── SECURITY.md ├── CHANGELOG.md ├── LICENSE.md ├── README.md ├── package.json └── src └── index.js /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | insert_final_newline = true 7 | trim_trailing_whitespace = true 8 | indent_style = space 9 | 10 | [*.{js,json}] 11 | indent_size = 4 12 | 13 | [*.md] 14 | trim_trailing_whitespace = false 15 | -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Contributions are **welcome** and will be fully **credited**. 4 | 5 | We accept contributions via Pull Requests on [Github](https://github.com/mvdnbrk/laravel-mix-tailwind-css). 6 | 7 | ## Pull Requests 8 | 9 | - Use the ES6 syntax. 10 | - **Document any change in behaviour:** Make sure the `README.md`, `CHANGELOG.md` and any other relevant documentation are kept up-to-date. 11 | - **Consider our release cycle:** We try to follow [SemVer v2.0.0](http://semver.org/). Randomly breaking public APIs is not an option. 12 | - **Create feature branches:** Don't ask us to pull from your master branch. 13 | - **One pull request per feature:** If you want to do more than one thing, send multiple pull requests. 14 | - **Send coherent history:** Make sure each individual commit in your pull request is meaningful. If you had to make multiple intermediate commits while developing, please [squash them](http://www.git-scm.com/book/en/v2/Git-Tools-Rewriting-History#Changing-Multiple-Commit-Messages) before submitting. 15 | 16 | **Happy coding**! 17 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: mvdnbrk 2 | -------------------------------------------------------------------------------- /.github/SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | If you discover any security related issues, please email mvdnbrk@gmail.com instead of using the issue tracker. 4 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to `laravel-mix-tailwindcss` will be documented in this file. 4 | 5 | ## [v1.3.0] - 2021-01-20 6 | 7 | ### Added 8 | - Added support for Laravel Mix 6.0. [`1325049`](https://github.com/mvdnbrk/laravel-mix-tailwindcss/commit/132504942c977694220641e5c02334befc973b28) 9 | 10 | ## [v1.2.0] - 2019-09-19 11 | 12 | ### Added 13 | - Added support for Laravel Mix 5.0. [`8c7cb8a`](https://github.com/mvdnbrk/laravel-mix-tailwindcss/commit/8c7cb8a395657d759de37ab4f7af34ccd2cb71f2) 14 | 15 | ## [v1.1.0] - 2019-06-07 16 | 17 | ### Added 18 | - Added auto detection of `postcss-import` plugin. [`5eb869f`](https://github.com/mvdnbrk/laravel-mix-tailwindcss/commit/5eb869f6ad619b375f5860731c745112d3fac6ab) 19 | 20 | ## [v1.0.2] - 2019-06-05 21 | 22 | ### Fixed 23 | - Updated laravel-mix peer dependency. [`5210801`](https://github.com/mvdnbrk/laravel-mix-tailwindcss/commit/5210801e356dda79eac44312806c21fea83460e2) 24 | 25 | ## [v1.0.1] - 2019-05-27 26 | 27 | ### Changed 28 | - Return early when `talwind.config.js` is found. [`327af17`](https://github.com/mvdnbrk/laravel-mix-tailwindcss/commit/327af1745e3d63734a11b14acb14a0da90cc5d41) 29 | 30 | ## [v1.0.0] - 2019-05-25 31 | 32 | ### Added 33 | - Added support for Tailwind CSS ^1.0. [`d111d3e`](https://github.com/mvdnbrk/laravel-mix-tailwindcss/commit/d111d3eed6690912997e719e33e3ea45e44ad4ec) 34 | 35 | [Unreleased]: https://github.com/mvdnbrk/laravel-mix-tailwindcss/compare/v1.2.0...HEAD 36 | [v1.2.0]: https://github.com/mvdnbrk/laravel-mix-tailwindcss/compare/v1.1.0...v1.2.0 37 | [v1.1.0]: https://github.com/mvdnbrk/laravel-mix-tailwindcss/compare/v1.0.2...v1.1.0 38 | [v1.0.2]: https://github.com/mvdnbrk/laravel-mix-tailwindcss/compare/v1.0.1...v1.0.2 39 | [v1.0.1]: https://github.com/mvdnbrk/laravel-mix-tailwindcss/compare/v1.0.0...v1.0.1 40 | [v1.0.0]: https://github.com/mvdnbrk/laravel-mix-tailwindcss/compare/v0.1.0...v1.0.0 41 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # The MIT License (MIT) 2 | 3 | Copyright (c) Mark van den Broek and Jeffrey Way. 4 | 5 | > Permission is hereby granted, free of charge, to any person obtaining a copy 6 | > of this software and associated documentation files (the "Software"), to deal 7 | > in the Software without restriction, including without limitation the rights 8 | > to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | > copies of the Software, and to permit persons to whom the Software is 10 | > furnished to do so, subject to the following conditions: 11 | > 12 | > The above copyright notice and this permission notice shall be included in 13 | > all copies or substantial portions of the Software. 14 | > 15 | > THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | > IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | > FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | > AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | > LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | > OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | > THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | Laravel Mix Tailwind CSS 4 | 5 |

6 | 7 | # Laravel Mix Tailwind CSS 8 | 9 | [![Latest Version on NPM][ico-version]][link-npm] 10 | [![Software License][ico-license]](LICENSE.md) 11 | [![StyleCI][ico-styleci]][link-styleci] 12 | [![Total Downloads][ico-downloads]][link-downloads] 13 | 14 | This extension provides instant Tailwind CSS support to your Mix builds. 15 | Please make sure that you are using `laravel-mix` version 2.1 or higher. 16 | 17 | This package works with Tailwind version 1.0 or higher but also with earlier versions. 18 | 19 | ## Usage 20 | 21 | You can install the package with npm or yarn: 22 | 23 | ```bash 24 | npm install mix-tailwindcss --save-dev 25 | ``` 26 | 27 | ```bash 28 | yarn add mix-tailwindcss --dev 29 | ``` 30 | 31 | Then require the extension in your Mix configuration: 32 | 33 | ```js 34 | const mix = require('laravel-mix'); 35 | 36 | require('mix-tailwindcss'); 37 | ... 38 | ``` 39 | 40 | Enable the extension by calling `tailwind()` in your Mix chain: 41 | 42 | ```js 43 | mix.sass('resources/sass/app.scss', 'public/css') 44 | .tailwind(); 45 | ``` 46 | 47 | If you are using a custom configuration file name, you will need to specify it when calling `tailwind()`: 48 | 49 | ```js 50 | mix.sass('resources/sass/app.scss', 'public/css') 51 | .tailwind('./tailwindcss-config.js'); 52 | ``` 53 | 54 | And you're done! 55 | 56 | Don't forget to [add the Tailwind directives](https://tailwindcss.com/docs/installation/#2-add-tailwind-to-your-css) to your css entry file. 57 | 58 | ### PostCSS with postcss-import 59 | 60 | If you're not integrating any Sass, Less or Stylus stylesheets you can use the `mix.postCss()` method. 61 | 62 | When the `postcss-import` plugin is installed, it will be automatically detected and applied to your build. 63 | 64 | ```js 65 | mix.postCss('resources/css/app.css', 'public/css') 66 | .tailwind(); 67 | ``` 68 | 69 | ## Contributing 70 | 71 | Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details. 72 | 73 | ## Security Vulnerabilities 74 | 75 | Please review our [security policy](.github/SECURITY.md) on how to report security vulnerabilities. 76 | 77 | ## Credits 78 | 79 | - [Mark van den Broek](https://github.com/mvdnbrk) 80 | - [Jeffrey Way](https://github.com/JeffreyWay) 81 | - [All Contributors](../../contributors) 82 | 83 | ## License 84 | 85 | The MIT License (MIT). Please see [License File](LICENSE.md) for more information. 86 | 87 | [ico-downloads]: https://img.shields.io/npm/dt/mix-tailwindcss.svg?style=flat-square 88 | [ico-license]: https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square 89 | [ico-styleci]: https://github.styleci.io/repos/188557285/shield?style=flat-square&branch=master 90 | [ico-version]: https://img.shields.io/npm/v/mix-tailwindcss.svg?style=flat-square 91 | 92 | [link-downloads]: https://npmjs.com/package/mix-tailwindcss 93 | [link-npm]: https://npmjs.com/package/mix-tailwindcss 94 | [link-styleci]: https://github.styleci.io/repos/188557285 95 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mix-tailwindcss", 3 | "version": "1.3.0", 4 | "description": "Tailwind CSS wrapper for Laravel Mix.", 5 | "homepage": "https://laravel-mix.com/extensions/tailwindcss", 6 | "author": { 7 | "name": "Mark van den Broek", 8 | "email": "mvdnbrk@gmail.com", 9 | "url": "https://github.com/mvdnbrk" 10 | }, 11 | "contributors": [ 12 | "Jeffrey Way" 13 | ], 14 | "keywords": [ 15 | "laravel", 16 | "laravel mix", 17 | "mix", 18 | "tailwind", 19 | "tailwind css" 20 | ], 21 | "main": "src/index.js", 22 | "repository": { 23 | "type": "git", 24 | "url": "git+https://github.com/mvdnbrk/laravel-mix-tailwindcss.git" 25 | }, 26 | "bugs": { 27 | "url": "https://github.com/mvdnbrk/laravel-mix-tailwindcss/issues" 28 | }, 29 | "license": "MIT", 30 | "peerDependencies": { 31 | "laravel-mix": "^2.1.7||^3.0||^4.0||^5.0||^6.0" 32 | }, 33 | "engines": { 34 | "node": ">=6.0.0" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | const mix = require('laravel-mix'); 2 | 3 | class Tailwind { 4 | seesTailwindConfig(path) { 5 | try { 6 | require.resolve(path); 7 | 8 | return true; 9 | } catch (e) { 10 | return false; 11 | } 12 | } 13 | 14 | dependencies() { 15 | this.requiresReload = `Tailwind CSS has now been installed.`; 16 | 17 | return ['tailwindcss']; 18 | } 19 | 20 | register(configPath) { 21 | this.configPath = configPath; 22 | 23 | if (this.configPath !== undefined) { 24 | return; 25 | } 26 | 27 | if (this.seesTailwindConfig('./tailwind.config.js')) { 28 | this.configPath = './tailwind.config.js'; 29 | 30 | return; 31 | } 32 | 33 | if (this.seesTailwindConfig('./tailwind.js')) { 34 | this.configPath = './tailwind.js'; 35 | } 36 | } 37 | 38 | boot() { 39 | if (Mix.components.has('sass')) { 40 | Config.processCssUrls = false; 41 | } 42 | 43 | if (Mix.components.has('postCss') && Mix.seesNpmPackage('postcss-import')) { 44 | Config.postCss.push(require('postcss-import')); 45 | } 46 | 47 | const tailwindcss = require('tailwindcss'); 48 | 49 | Config.postCss.push(tailwindcss(this.configPath)); 50 | } 51 | } 52 | 53 | mix.extend('tailwind', new Tailwind()); 54 | --------------------------------------------------------------------------------