Hi,
thanks for your article on how to include sass and bootstrap into a next.js project.
As for the caveat, you can evaluate the process.env.NODE_ENV variable and add the purgecss setting block only in the production environment. For more, see the next.js docs: Customizing Plugins .
Here is my postcss.config.js file:
In my still empty project that includes bootstrap, I could decrease the size of the .next folder from 6.6 MB to 5.2MB using purgecss in the production build.
Tailwind do trim unwanted css with new JIT mode Without using purgeCss unlike bootstrap. And every website looks almost same in Bootstrap, while in tailwind you have got complete control over the design. Without using any external libs
Tailwind JIT does look really interesting. But I disagree with the cliche insult for Bootstrap, "that it makes every site look the same." You do have complete control over everything in Bootstrap, just like you do in Tailwind.
I think it's mostly that most people either don't know or don't care about customizing Bootstrap's default theme and so just import it, copy in the default HTML template, and call it a day. Tailwind sites just hide how little people care about changing the default theme by providing less help applying it.
The point is that they're different tools and they have different pros and cons to them (which is why I use both on a month-to-month basis). You can say "a table saw has more power than a hand saw" but that doesn't mean its the right tool for every job.
Hi, thanks for your article on how to include sass and bootstrap into a next.js project. As for the caveat, you can evaluate the process.env.NODE_ENV variable and add the purgecss setting block only in the production environment. For more, see the next.js docs: Customizing Plugins . Here is my postcss.config.js file:
module.exports = { plugins: [ 'postcss-flexbugs-fixes', [ 'postcss-preset-env', { autoprefixer: {flexbox: 'no-2009'}, stage: 3, features: {'custom-properties': false}, }, ], ], }; if (process.env.NODE_ENV === 'production') { module.exports.plugins.push([ '@fullhuman/postcss-purgecss', { content: ['./src/**/*.{js,jsx,ts,tsx}', './pages/**/*.{js,jsx,ts,tsx}'], defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [], safelist: ['html', 'body'], }, ]); }In my still empty project that includes bootstrap, I could decrease the size of the .next folder from 6.6 MB to 5.2MB using purgecss in the production build.