31.05.2019

How to add Tailwind CSS to Gridsome

Here you will find an instruction on how to add Tailwind CSS to Gridsome.

Install a few plugins:

yarn add tailwindcss tailwindcss-transitions postcss-import postcss-nested @fullhuman/postcss-purgecss

Add some code for extracting custom components from Tailwind in the very beginning of gridsome.config.js:

class TailwindExtractor {
  static extract(content) {
    return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
  }
}

Add the following code to module.exports of gridsome.config.js:

chainWebpack: config => {
  config.module
    .rule('css')
    .oneOf('normal')
    .use('postcss-loader')
    .tap(options => {
      options.plugins.unshift(...[
        require('postcss-import'),
        require('postcss-nested'),
        require('tailwindcss'),
      ])

      if (process.env.NODE_ENV === 'production') {
        options.plugins.push(...[
          require('@fullhuman/postcss-purgecss')({
            content: [
              'src/assets/**/*.css',
              'src/**/*.vue',
              'src/**/*.js'
            ],
            extractors: [
              {
                extractor: TailwindExtractor,
                extensions: ['css', 'vue', 'js']
              }
            ],
            whitelistPatterns: [/shiki/]
          }),
        ])
      }
      return options
    })
}

Create main.css in src/assets/css:

/*! purgecss start ignore */
@import 'tailwindcss/base';
/*! purgecss end ignore */

/* start components */
@import 'tailwindcss/components';
/* end components */

/* start utilities */
@import 'tailwindcss/utilities';
/* end utilities */

Add the following line to main.js:

import '~/assets/css/main.css'

Done!

18.06.2019

Airtable. Как организовать запись на мероприятие. На примере выставки.

Бесплатный видеоурок для тех, кто хочет автоматизировать часть рутинной работы.
25.05.2019

Нужен ли логотип на сайте

Логотип на сайте — настолько частый и привычный элемент визуальной композиции и навигации внутри сайта, что его всё-таки можно назвать обязательным элементом любого сайта, так как посетители ожидают его увидеть.
25.05.2019

Зачем нужна мобильная версия сайта?

Многие сайты сегодня создаются с подходом mobile first, то есть с приоритетом на разработку мобильной версии. Оправдано ли это? Нужна ли вам мобильная версия?
12.03.2019

Статичный сайт vs. сайт на WordPress

Стоит ли создавать сайт на WordPress в 2019 году? Я сравнил процесс создания сайта по двум подходами: если он полностью построен на WordPress и если он создан как статичный сайт по технологии JAMstack. Какой из лучше и почему — читайте в этой статье.
12.03.2019

Список всех headless CMS для статичных сайтов

В этом материале я поставил перед собой задачу собрать все существующие headless CMS для статичных сайтов.
09.03.2019

Что такое fullstack-дизайн и чем занимается fullstack-дизайнер

Если три года назад главной тенденцией были fullstack-разработчики, то сегодня это — fullstack-дизайнеры. В этой статье я расскажу, с чем это связано и как стать fullstack-дизайнером.
25.09.2011

Куда уходит Mac, или Возвращение iBook

OS X Lion — ОС, корректирующая направление Apple в светлое будущее одной операционной системы. Насколько возможно создать единую ОС, а главное — нужно и важно ли это для прогресса — сейчас и попробуем разобраться.
Все посты