Okay, so I'm about to put my Laravel project in production. I tested everything on local host and it works perfectly using Tailwind 3. Yet, when I ran some PHP artisan commands to clear all cache and etc., migrate:fresh my database, and then ran npm run dev, I noticed that Tailwind removed the styles that I used in seeding blogs (I use seed to seed fake blog posts and view how they will look like).
For example I'm using the Typography Tailwind plugin with the utility-class prose and so on. When I ran migrate:fresh and the fake blog post deleted from database, then cleared Laravel cache, and ran npm run dev, I noticed that all the prose styles are being removed from app.css. Of course I don't want that because this should be applied on each and every blog post that I will submit in production.
So how can I stop Tailwind from deleting these styles? I currently have all that I need and I don't want anything else removed.
webpack.mix
const mix = require("laravel-mix");
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js("resources/js/app.js", "public/js")
.vue()
.postCss("resources/css/app.css", "public/css", [
require("postcss-import"),
require("tailwindcss"),
require("autoprefixer"),
]);
tailwind.config.js
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
darkMode: "class",
content: [
"./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
"./storage/framework/views/*.php",
"./resources/views/*.blade.php",
"./resources/views/components/*.blade.php",
"./resources/views/auth/*.blade.php",
"./resources/views/layouts/*.blade.php",
"./resources/js/components/categories/*.vue",
"./resources/js/components/**/*.vue",
],
theme: {
screens: {
xs: "364px",
sm: "430px",
sd: "644px",
md: "768px",
lg: "1024px",
xl: "1155px",
"2xl": "1280px",
},
extend: {
fontFamily: {
sans: ["Nunito", ...defaultTheme.fontFamily.sans],
},
typography: ({ theme }) => ({
white: {
css: {
"--tw-prose-body": theme("colors.white"),
"--tw-prose-headings": theme("colors.blue[400]"),
"--tw-prose-lead": theme("colors.purple[700]"),
"--tw-prose-links": theme("colors.blue[800]"),
"--tw-prose-bold": theme("colors.blue[800]"),
"--tw-prose-counters": theme("colors.blue[900]"),
"--tw-prose-bullets": theme("colors.blue[900]"),
"--tw-prose-hr": theme("colors.blue[800]"),
"--tw-prose-quotes": theme("colors.blue[800]"),
"--tw-prose-quote-borders": theme("colors.blue[800]"),
"--tw-prose-captions": theme("colors.blue[800]"),
"--tw-prose-code": theme("colors.blue[800]"),
"--tw-prose-pre-code": theme("colors.blue[200]"),
"--tw-prose-pre-bg": theme("colors.gray[900]"),
"--tw-prose-th-borders": theme("colors.blue[300]"),
"--tw-prose-td-borders": theme("colors.blue[200]"),
},
},
black: {
css: {
"--tw-prose-body": theme("colors.black"),
},
},
}),
},
},
plugins: [
require("@tailwindcss/forms"),
require("@tailwindcss/typography"),
],
};
Tailwind will only include the classes that it finds by scanning the files specified in the content array in tailwind.config.js. If you want to include additional classes that are only in your dynamic content, you can safelist those classes in your config. For example:
module.exports = {
...
safelist: [
'prose',
'prose-xl',
],
...
}
See: https://tailwindcss.com/docs/content-configuration#safelisting-classes