https://github.com/JeffreyWay/laravel-mix-tailwind

mix.tailwind()
https://github.com/JeffreyWay/laravel-mix-tailwind

Last synced: 3 months ago
JSON representation

mix.tailwind()

• Host: GitHub
• URL: https://github.com/JeffreyWay/laravel-mix-tailwind
• Owner: JeffreyWay
• Created: 2018-03-16T21:32:39.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2021-01-26T16:39:42.000Z (almost 4 years ago)
• Last Synced: 2024-06-29T08:03:27.557Z (5 months ago)
• Language: JavaScript
• Size: 10.7 KB
• Stars: 348
• Watchers: 7
• Forks: 25
• Open Issues: 7
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Laravel Mix Tailwind

This extension provides instant Tailwind support to your Mix (v2.1 and up) builds.

## Usage

First, install the extension.

```

npm install laravel-mix-tailwind --save-dev

```

Then, require it within your `webpack.mix.js` file, like so:

```js

let mix = require('laravel-mix');

require('laravel-mix-tailwind');

mix

    .js('resources/js/app.js', 'public/js')

    .less('resources/less/app.less', 'public/css')

    .tailwind();

```

## Next steps

This package requries tailwind.js, so don't forget to run:

```

npx tailwindcss init tailwind.js

npm run dev

```

app.scss file example:

```

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

```

And you're done! Compile everything down with `npm run dev`

[More information about the Tailwind directives](https://tailwindcss.com/docs/installation#3-use-tailwind-in-your-css) to your Sass/Less/Stylus entry file.)