All Projects → mvdnbrk → laravel-mix-tailwindcss

mvdnbrk / laravel-mix-tailwindcss

Licence: MIT License
Tailwind CSS wrapper for Laravel Mix.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to laravel-mix-tailwindcss

laravel-mix-jigsaw
Laravel Mix plugin for Jigsaw.
Stars: ✭ 14 (-67.44%)
Mutual labels:  laravel-mix, laravel-mix-plugin
sage-vue-tailwind
Sage 10 with laravel mix, tailwindcss and vuejs https://roots.io/sage/
Stars: ✭ 38 (-11.63%)
Mutual labels:  laravel-mix, tailwindcss
laravel-mix-auto-extract
[DEPRECATED] Laravel Mix v2/3 plugin to auto extract vendor js
Stars: ✭ 26 (-39.53%)
Mutual labels:  laravel-mix, laravel-mix-plugin
apps
daily.dev application suite
Stars: ✭ 253 (+488.37%)
Mutual labels:  extension, tailwindcss
laravel-mix-tailwindcss-purgecss
Minimal Boilerplate for building static pages based on Laravel Mix 6, TailwindCSS 3, PostCSS 8, and ES6 Vanilla JS components.
Stars: ✭ 15 (-65.12%)
Mutual labels:  laravel-mix, tailwindcss
pentadactyl-pm
Pentadactyl for Pale Moon | New official repo is here https://github.com/pentadactyl/pentadactyl
Stars: ✭ 26 (-39.53%)
Mutual labels:  extension
urql-devtools-exchange
The exchange for usage with Urql Devtools
Stars: ✭ 35 (-18.6%)
Mutual labels:  extension
theme-lib-mix
A Laravel Mix function for WordPress themes.
Stars: ✭ 33 (-23.26%)
Mutual labels:  laravel-mix
tailwindcss-theme-swapper
A helper for getting tailwind values into css custom properties and switching them between media queries and classes. You can try it out here: https://play.tailwindcss.com/a16eJQSf4a
Stars: ✭ 115 (+167.44%)
Mutual labels:  tailwindcss
ACBRadialCollectionView
An extension on UICollectionView which automatically transforms collection view cells to a radial path
Stars: ✭ 31 (-27.91%)
Mutual labels:  extension
protonmail-webextension
Unofficial webextension for ProtonMail
Stars: ✭ 39 (-9.3%)
Mutual labels:  extension
Minimalist-Blog
Tailwind CSS Starter Template - Minimalist Blog
Stars: ✭ 21 (-51.16%)
Mutual labels:  tailwindcss
cadhub
We're out to raise awareness and put CodeCAD on the map. The success of CadHub can be measured by the amount it promotes the use of CodeCAD within the mechanical/manufacturing industry and the strength the CadHub community.
Stars: ✭ 204 (+374.42%)
Mutual labels:  tailwindcss
stitchwind
A bridge between Tailwind and Stitches
Stars: ✭ 33 (-23.26%)
Mutual labels:  tailwindcss
website
My personal website and blog. Made with Nuxt.js and WindiCSS.
Stars: ✭ 19 (-55.81%)
Mutual labels:  tailwindcss
mkdocs-click
An MkDocs extension to generate documentation for Click command line applications
Stars: ✭ 34 (-20.93%)
Mutual labels:  extension
trueChart-Menubar4Sense
MENUBAR as visualization extension for Qlik Sense® allows for vertical and horizontal buttons and selections (fields, master dimensions and variables) as well as unlimited trigger based Actions. #trueChart #menubar #highcoordination
Stars: ✭ 19 (-55.81%)
Mutual labels:  extension
middleman starter kit
Middleman front-end starter kit
Stars: ✭ 19 (-55.81%)
Mutual labels:  tailwindcss
sveltober
Cybernetically enhanced October applications
Stars: ✭ 19 (-55.81%)
Mutual labels:  tailwindcss
nuxt-breaky
Display your Tailwind CSS Breakpoints within Nuxtjs during Development
Stars: ✭ 129 (+200%)
Mutual labels:  tailwindcss

Laravel Mix Tailwind CSS

Laravel Mix Tailwind CSS

Latest Version on NPM Software License StyleCI Total Downloads

This extension provides instant Tailwind CSS support to your Mix builds.
Please make sure that you are using laravel-mix version 2.1 or higher.

This package works with Tailwind version 1.0 or higher but also with earlier versions.

Usage

You can install the package with npm or yarn:

npm install mix-tailwindcss --save-dev
yarn add mix-tailwindcss --dev

Then require the extension in your Mix configuration:

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

require('mix-tailwindcss');
...

Enable the extension by calling tailwind() in your Mix chain:

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

If you are using a custom configuration file name, you will need to specify it when calling tailwind():

mix.sass('resources/sass/app.scss', 'public/css')
   .tailwind('./tailwindcss-config.js');

And you're done!

Don't forget to add the Tailwind directives to your css entry file.

PostCSS with postcss-import

If you're not integrating any Sass, Less or Stylus stylesheets you can use the mix.postCss() method.

When the postcss-import plugin is installed, it will be automatically detected and applied to your build.

mix.postCss('resources/css/app.css', 'public/css')
    .tailwind();

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

License

The MIT License (MIT). Please see License File for more information.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].