https://github.com/bhushan/tailwind-mix

This extension provides instant Tailwind support to Laravel Mix builds.
https://github.com/bhushan/tailwind-mix

Last synced: 17 days ago
JSON representation

This extension provides instant Tailwind support to Laravel Mix builds.

• Host: GitHub
• URL: https://github.com/bhushan/tailwind-mix
• Owner: bhushan
• License: mit
• Created: 2020-06-19T14:01:16.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-09-01T14:01:51.000Z (about 4 years ago)
• Last Synced: 2024-10-11T09:14:23.016Z (about 1 month ago)
• Language: JavaScript
• Homepage:
• Size: 17.6 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# Tailwind Mix

![npm](https://img.shields.io/npm/v/tailwind-mix?style=for-the-badge)

![NPM](https://img.shields.io/npm/l/tailwind-mix?style=for-the-badge)

![npm](https://img.shields.io/npm/dt/tailwind-mix?style=for-the-badge)

![npm bundle size](https://img.shields.io/bundlephobia/min/tailwind-mix?style=for-the-badge)

This extension provides instant Tailwindcss support to Laravel Mix builds.

## Usage

First, install the extension.

```bash

npm install tailwind-mix --save-dev

```

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

```js

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

require('tailwind-mix');

mix

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

    .sass('resources/sass/app.scss', 'public/css')

    .tailwind();

```

## Next steps

This package requires tailwind configuration (tailwind.js or tailwind.config.js), so don't forget to run:

```bash

npx tailwindcss init

```

Above command will create `tailwind.js` or `tailwind.config.js` file for you.

In case for any reason you want to change file name to different from default you can pass file path as an argument.

**Example:**

```js

mix

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

    .sass('resources/sass/app.scss', 'public/css')

    .tailwind('./filename.js');

```

app.scss file example:

```scss

@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#2-add-tailwind-to-your-css) to your Sass/Less entry file.