Tailwind Styleguide for Laravel Mix

August 22, 2018

I have released a new Laravel Mix plugin for displaying an interactive and always updated styleguide for Tailwind. It basically reads your tailwind.js config file and boots up a local server to show your currently configured colours, screen sizes and enabled modules. More features to come soon.

What is a styleguide?

A styleguide is a document that describes colours and components for your brand. This helps automate that process by using values you have already defined.

Tailwind Styleguide

What's to come?

I would like to still add a few more features to the mix plugin such as adding custom components to it. If you have any ideas or would like to contribute to the project please visit the github repo.

How can I get it?

First install the extension

npm install laravel-mix-talilwind-styleguide

Then you can require it within your webpack.mix.js file

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

require('laravel-mix-tailwind-styleguide');

mix.js('resources/assets/js/app.js', 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css')
  .tailwindStyleguide();

Once this has been done, running either npm run watch or npm run dev will start up a local HTTP server at http://localhost:8888/.