Not pugre css 1.6.1 !

[pruginkin]

In production mode my css file contains not used css classes (spin, ping ... and not used @media)

How fix it?

.container {
    width: 100%
}

@media (min-width: 640px) {
    .container {
        max-width:640px
    }
}

@media (min-width: 768px) {
    .container {
        max-width:768px
    }
}

@media (min-width: 1024px) {
    .container {
        max-width:1024px
    }
}

@media (min-width: 1280px) {
    .container {
        max-width:1280px
    }
}
@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

@keyframes ping {
    0% {
        transform: scale(1);
        opacity: 1
    }

    75%,to {
        transform: scale(2);
        opacity: 0
    }
}

@keyframes pulse {
    0%,to {
        opacity: 1
    }

    50% {
        opacity: .5
    }
}

@keyframes bounce {
    0%,to {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(.8,0,1,1)
    }

    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0,0,.2,1)
    }
}

@media (min-width: 640px) {
    .sm\:container {
        width:100%;
        max-width: 640px
    }

    @media (min-width: 768px) {
        .sm\:container {
            max-width:768px
        }
    }

    @media (min-width: 1024px) {
        .sm\:container {
            max-width:1024px
        }
    }

    @media (min-width: 1280px) {
        .sm\:container {
            max-width:1280px
        }
    }
}

@media (min-width: 768px) {
    .md\:container {
        width:100%
    }

    @media (min-width: 640px) {
        .md\:container {
            max-width:640px
        }
    }

    @media (min-width: 768px) {
        .md\:container {
            max-width:768px
        }
    }

    @media (min-width: 1024px) {
        .md\:container {
            max-width:1024px
        }
    }

    @media (min-width: 1280px) {
        .md\:container {
            max-width:1280px
        }
    }
}

@media (min-width: 1024px) {
    .lg\:container {
        width:100%
    }

    @media (min-width: 640px) {
        .lg\:container {
            max-width:640px
        }
    }

    @media (min-width: 768px) {
        .lg\:container {
            max-width:768px
        }
    }

    @media (min-width: 1024px) {
        .lg\:container {
            max-width:1024px
        }
    }

    @media (min-width: 1280px) {
        .lg\:container {
            max-width:1280px
        }
    }
}

@media (min-width: 1280px) {
    .xl\:container {
        width:100%
    }

    @media (min-width: 640px) {
        .xl\:container {
            max-width:640px
        }
    }

    @media (min-width: 768px) {
        .xl\:container {
            max-width:768px
        }
    }

    @media (min-width: 1024px) {
        .xl\:container {
            max-width:1024px
        }
    }

    @media (min-width: 1280px) {
        .xl\:container {
            max-width:1280px
        }
    }
}

[estevanmaito]

More information about your project would be helpful (config, CSS, etc).

Are you ignoring code inside your CSS, something like this?

/* purgecss start ignore */
@tailwind  base;
@tailwind  components;
/* purgecss end ignore */

@tailwind  utilities;

[pruginkin]

Here my template - https://github.com/pruginkin/Sapper-Typescript-Tailwind-SCSS
I not use animation but it in index.css

[pruginkin]

[adamwathan]

This all works as expected so this is likely a configuration issue. Converting to a discussion but happy to help.

[pruginkin]

Maybe need add this -
@fullhuman/postcss-purgecss")({ keyframes: true}) ?

[pruginkin]

I FIX IT ! add @fullhuman/postcss-purgecss")({ keyframes: true})

postcss.config.js

const cssnano = require("cssnano")({ preset: "default" });
const tailwindcss = require("tailwindcss");
const autoprefixer = require('autoprefixer')({ overrideBrowserslist: ['last 2 versions'] });

const purgecss = require("@fullhuman/postcss-purgecss")({
    content: ["./src/**/*.svelte", "./src/**/*.html"],
    keyframes: true,
    defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
});

const production = process.env.NODE_ENV === 'production';

module.exports = {
    plugins: [
        tailwindcss, ...(production ? [purgecss, autoprefixer, cssnano] : []),
    ]
};

[estevanmaito]

@adamwathan what do you think about a section in the docs pointing that even if no animation is used, they are included in the production build, unless specifically purged (eg. below)?

@pruginkin you can do this within your Tailwind config without adding purgecss, just add the keyframes property to options inside purge.

purge: {
  content: ['./*.html'],
  options: {
    keyframes: true,
  },
},