01.06.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!

Другие посты...

19.04.2023

Почему первое поле в Airtable стоит делать формулой

Во всех своих проектах в Airtable я за редким исключением настраиваю первое поле как формулу, а не как поле, которое можно редактировать. Даже тогда, когда первое поле явно должно быть названием предмета или, например, заголовком статьи.

03.04.2023

В Airtable появилась возможность создавать шаблоны новых записей

Для определённой таблицы задаём шаблон, там указываем какие поля должны быть заполнены по умолчанию. Теперь в левом нижнем углу, где плюсик для добавления новой записи, появится выбор шаблона.

09.10.2021

Airtable: как запретить пользователям дублировать базы?

Для этого надо зайти в настройки воркспейса и отметить галку «Restrict adding new collaborators to this workspace and its bases».

11.08.2021

Какую нагрузку может выдержать API Airtable?

Airtable разрешает обращаться к API до 5 раз в секунду — при превышении этого лимита вам, по заявлению Airtable в документации, блокируется доступ на 30 секунд.

  • © 2023 Сергей Филимонов
  • ИП Филимонов С.В.