Tailwind CSS is a full-featured utility class CSS framework. It has just about everything you need. It also has a bunch of things you probably don't need. And there is no need to ship the CSS you don't need to the client. Tailwind is able to exclude the unused CSS through a mechanism called purging.
To turn on purging (for production) and for Tailwind to know what can be
safely purged, you need to specify one or more purge paths in your
tailwind.config.js
file. This is a listing of all the places where you use
Tailwind utility classes.
Specify it with an array at the purge
key:
module.exports = {
purge: [
"./src/components/**/*.jsx",
"./pages/**/*.js"
],
darkMode: false,
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
Notice that globbed paths can be used as a way of specifying files located in a
nested directory structure. Above I've stated that any jsx
files located
anywhere under src/components/
as well as any js
files located anywhere
under pages/
should be checked.