gulp-joseffie-tailwind-pack

Gulp based starter template for better front-end coding with TailwindCSS and Pug & SCSS preprocessors

gulp-joseffie-tailwind-pack

Features

Component approach with BEM based.
Automatic creation of component directories with files using the bem-tools-create tool.
Automatic transform of fonts to woff/woff2 and file creation with @font-face declarations.
Optimization and conversion of images to webp format.
Automatic icon system based on SVG sprites.
Checking for and fixing errors on commit.
Using a hard code guide.

Quickstart

Make sure you have NodeJS and Yarn installed

Install the Gulp and bem-tools-core globally:

$ yarn add --globall gulp bem-tools-core bem-tools-create

Clone the project using:

$ git clone https://github.com/joseffie/gulp-joseffie-tailwind-pack.git my-project

Go to the project and run:

$ yarn

After installing the dependencies, start the dev server:

$ yarn run dev

Main tasks

yarn run dev - launches watcher and server.
yarn run build - compiles and optimises project.
yarn run zip - build and archives project.
yarn run deploy - builds project and pushes to GitHub repo in gh-pages branch.
yarn run build:fonts - compiles an local fonts located in src/assets/fonts.
yarn run build:sprites - compiles an SVG icons located in src/assets/icons into SVG sprites.

Troubles using Pug with Tailwind

Some characters used in Tailwind classes are not supported by Pug when writing classes with a dot .:

The colon character : used for utilities to style elements. This problem was fixed by changing the separator in tailwind.config.cjs from colon : to underscore _.

//- not supported, the code will return an error
element.font-gray-900.hover:font-blue-500

//- write
element.font-gray-900.hover_font-blue-500

The [ and ] characters used to write arbitrary values. You will have to write classes for arbitrary values in the class attribute.

//- not supported, the code will return an error
element.max-w-lg.mx-auto.px-[25px]

//- write
element.max-w-lg.mx-auto(class='px-[25px]')

Likewise with the / character, which is used in fractional values, and with ! character which is used for important defining.

//- not supported, the code will return an error
element.w-1/2
element.!text-blue-100

//- write
element(class='w-1/2')
element(class='!text-blue-100')

Component Generator

Create empty component by name in src/components folder.

By default generates only *.pug, *.scss and *.js files.

$ bem create component-name

If you need to create only one file type, use the -T flag:

$ bem create component-name -T pug

If you need to remove one or more default file types, use the -n flag:

$ bem create component-name -n js

If you need to add another file type to your component folder, use the -t flag:

$ bem create component-name -t md

You can also combine flags:

$ bem create component-name -n js -t yml

joseffie/gulp-joseffie-tailwind-pack