├── README.md
├── index.js
└── package.json


/README.md:
--------------------------------------------------------------------------------
 1 | # Laravel Mix Tailwind
 2 | 
 3 | This extension provides instant Tailwind support to your Mix (v2.1 and up) builds.
 4 | 
 5 | ## Usage
 6 | 
 7 | First, install the extension.
 8 | 
 9 | ```
10 | npm install laravel-mix-tailwind --save-dev
11 | ```
12 | 
13 | Then, require it within your `webpack.mix.js` file, like so:
14 | 
15 | ```js
16 | let mix = require('laravel-mix');
17 | 
18 | require('laravel-mix-tailwind');
19 | 
20 | mix
21 |     .js('resources/js/app.js', 'public/js')
22 |     .less('resources/less/app.less', 'public/css')
23 |     .tailwind();
24 | ```
25 | 
26 | ## Next steps
27 | 
28 | This package requries tailwind.js, so don't forget to run:
29 | 
30 | ```
31 | npx tailwindcss init tailwind.js
32 | npm run dev
33 | ```
34 | 
35 | app.scss file example:
36 | 
37 | ```
38 | @import "tailwindcss/base";
39 | @import "tailwindcss/components";
40 | @import "tailwindcss/utilities";
41 | ```
42 | 
43 | 
44 | And you're done! Compile everything down with `npm run dev`
45 | 
46 | [More information about the Tailwind directives](https://tailwindcss.com/docs/installation#3-use-tailwind-in-your-css) to your Sass/Less/Stylus entry file.)
47 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | let mix = require('laravel-mix');
 2 | 
 3 | let fs = require('fs')
 4 | 
 5 | class Tailwind {
 6 |     dependencies() {
 7 |         this.requiresReload = `
 8 |             Tailwind has now been installed. Please ensure that
 9 |             your configuration file (tailwind.js or tailwind.config.js)
10 |             has been created (node_modules/.bin/tailwind init),
11 |             and then run "npm run dev" again.
12 |         `;
13 | 
14 |         return ['tailwindcss'];
15 |     }
16 | 
17 |     register(oldConfigPath = './tailwind.js') {
18 |         let newConfigPath = './tailwind.config.js';
19 | 
20 |         if (fs.existsSync(oldConfigPath)) {
21 |             this.configPath = oldConfigPath;
22 |         } else if (fs.existsSync(newConfigPath)) {
23 |             this.configPath = newConfigPath;
24 |         } else {
25 |             throw 'Error: Files tailwind.js or tailwind.config.js don\'t exist.';
26 |         }
27 |     }
28 | 
29 |     boot() {
30 |         if (Mix.components.has('sass')) {
31 |             Config.processCssUrls = false;
32 |         }
33 | 
34 |         let tailwindcss = require('tailwindcss');
35 | 
36 |         Config.postCss.push(tailwindcss(this.configPath));
37 |     }
38 | }
39 | 
40 | mix.extend('tailwind', new Tailwind());
41 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "laravel-mix-tailwind",
 3 |   "version": "0.1.2",
 4 |   "description": "A quick Laravel Mix extension for Tailwind support.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/jeffreyway/laravel-mix-tailwind.git"
12 |   },
13 |   "keywords": [
14 |     "laravel",
15 |     "laravel mix",
16 |     "mix",
17 |     "tailwind"
18 |   ],
19 |   "author": "Jeffrey Way",
20 |   "license": "MIT",
21 |   "bugs": {
22 |     "url": "https://github.com/jeffreyway/laravel-mix-tailwind/issues"
23 |   },
24 |   "homepage": "https://github.com/jeffreyway/laravel-mix-tailwind#readme"
25 | }
26 | 


--------------------------------------------------------------------------------