We've moved discussions to Discord

Tailwind if not purging unused styles

Nicholas Seferos •
When I deploy I am faced with this warning:
Tailwind is not purging unused styles because no template paths have been provided.
Is jumpstart purging css anywhere else? 
William Kennedy •
Can you share your tailwind config or your postcss config?

Here is my postcss usually: Note the purge css settings

let environment = {
    plugins: [
      require('tailwindcss')('app/javascript/stylesheets/tailwind.config.js'),
      require('autoprefixer'),
      require('postcss-import'),
      require('postcss-flexbugs-fixes'),
      require('postcss-preset-env')({
        autoprefixer: {
          flexbox: 'no-2009'
        },
        stage: 3
      }),
    ]
}

  if (process.env.RAILS_ENV === "production" || process.env.RAILS_ENV === "staging") {
    // A whitelist of css classes to keep that might not be found in the app
  function collectWhitelist() {
      return [
        'font-serif', 'tab-active', 'transition', 'text-gray-400',
        'bg-twitter', 'bg-facebook', 'bg-google_oauth2',
        'text-twitter', 'text-facebook', 'text-google_oauth2',
        'btn-twitter', 'btn-facebook', 'btn-github', 'btn-google_oauth2'
      ];
    }
// whitelist
    environment.plugins.push(
      require('@fullhuman/postcss-purgecss')({
        content: [
          './**/*.html.erb',
          './app/helpers/**/*.rb',
          './app/javascript/**/*.js',
        ],
      defaultExtractor: content => content.match(/[\w-/.:]+(?<!:)/g) || [],
        whitelist: collectWhitelist(),
        whitelistPatterns: [],
        whitelistPatternsChildren: [/trix/, /attachment/, /tribute/, /tippy/, /flatpickr/],
      })
  )
  }

module.exports = environment



And my tailwind looks like the following:


// See the Tailwind default theme values here:
// https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js

module.exports = {
  // Opt-in to TailwindCSS future changes
  future: {
    defaultLineHeights: true,
    purgeLayersByDefault: true,
    removeDeprecatedGapUtilities: true,
    standardFontWeights: true,
  },

  plugins: [
    // Uncomment the following if you'd like to use TailwindUI
    require('@tailwindcss/ui')({
      layout: 'sidebar',
    })
  ],

  // Purge unused TailwindCSS styles
  purge: {
    enabled: true,
    content: [
      './**/*.html.erb',
      './app/helpers/**/*.rb',
      './app/javascript/**/*.js',
    ],
  },

  // All the default values will be compiled unless they are overridden below
  theme: {
    // Extend (add to) the default theme in the `extend` key
    extend: {
      // Create your own at: https://javisperez.github.io/tailwindcolorshades
      colors: {
        'primary': {
          50: '#F6F7FF',
          100: '#EDF0FE',
          200: '#D2D9FD',
          300: '#B6C1FB',
          400: '#8093F9',
          500: '#4965F6',
          600: '#425BDD',
          700: '#2C3D94',
          800: '#212D6F',
          900: '#161E4A',
        },
        'secondary': {
          50: '#F5FDF9',
          100: '#ECFAF4',
          200: '#CFF3E3',
          300: '#B2ECD2',
          400: '#78DDB0',
          500: '#3ECF8E',
          600: '#38BA80',
          700: '#257C55',
          800: '#1C5D40',
          900: '#133E2B',
        },
        'tertiary': {
          50: '#F7F7F8',
          100: '#EEEEF1',
          200: '#D5D5DB',
          300: '#BCBCC5',
          400: '#898A9A',
          500: '#57586E',
          600: '#4E4F63',
          700: '#343542',
          800: '#272832',
          900: '#1A1A21',
        },
        'danger': {
          50: '#FEF8F8',
          100: '#FEF2F2',
          200: '#FCDEDE',
          300: '#FACACA',
          400: '#F7A3A3',
          500: '#F37B7B',
          600: '#DB6F6F',
          700: '#924A4A',
          800: '#6D3737',
          900: '#492525',
        },
        "code-400": "#fefcf9",
        "code-600": "#3c455b",
      },
    },
    // override the default theme using the key directly
    fontFamily: {
      sans: [
        "Inter",
        "-apple-system",
        "BlinkMacSystemFont",
        '"Segoe UI"',
        "Roboto",
        '"Helvetica Neue"',
        "Arial",
        '"Noto Sans"',
        "sans-serif",
        '"Apple Color Emoji"',
        '"Segoe UI Emoji"',
        '"Segoe UI Symbol"',
        '"Noto Color Emoji"',
      ],
    },
  },
  variants: {
    borderWidth: ['responsive', 'last', 'hover', 'focus'],
  },
}

Nicholas Seferos •
Thanks  William Kennedy ,

Looks like I was missing the purgecss config from my tailwind.config
Notifications
You’re not receiving notifications from this thread.