├── 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 | --------------------------------------------------------------------------------