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.