Блог

Главная - Вопросы по программированию - Как проверить, действительно ли Tailwind очищает css?

Как проверить, действительно ли Tailwind очищает css?

#css #tailwind-css

#css #tailwind-css

Вопрос:

У меня есть сайт gatsby, и я хочу уменьшить размер пакета css. Я использовал популярный плагин gatsby-plugin-purgecss, но он ломает мой сайт даже с конфигурациями, а недавно tailwind, похоже, добавил прямую поддержку purgecss: https://tailwindcss.com/docs/controlling-file-size

Однако при использовании нового метода с очисткой непосредственно из tailwind я не могу сказать, очищается ли css или нет.

Вот мой tailwind.config.js

 module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.jsx',
  ],
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  theme: {
    extend: {
      backgroundColor: {
        primary: 'var(--color-bg-primary)',
      },
    },
  },
  variants: {},
  plugins: [],
};

Когда я запускаю gatsby build amp;amp; gatsby serve , ничто в терминале не указывает на то, что пакет css сокращается. Как я могу проверить?

Ответ №1:

Вы можете проверить размер файла css в инструментах разработчика вашего предпочтительного браузера.

  1. Откройте инструменты разработчика
  2. Перейдите на вкладку Сеть
  3. Фильтр по CSS
  4. Перезагрузите сайт
  5. Наведите указатель мыши на столбец size