Tailwindcss styles completely disappears after running build-css - css

Question

This is the import url
After writing npm run build-css on the terminal. The changes i made before and the change i wanted to make disappeared. None of the tailwindcss styles i had in my index.html was found.
extend: {
colors: {
primary: "FF6363"
},
fontfamily: {
body: ['Nunito'],
}
},

Answer 1

I would start by making sure the color-extend has the correct '#' before it and also wrapping the color name in quotes also.
Also check your webpack.mix.js file to make sure yourt calling the files in the correct order.
Should resemble something similar to mine.
mix.js("resources/js/app.js", "public/js")
.vue()
.sass("resources/sass/app.scss", "public/css")
.sass("resources/sass/components/sidebar.scss", "public/css")
.sass("resources/sass/components/modal.scss", "public/css")
.sass("resources/sass/components/language-picker.scss", "public/css")
.sass("resources/sass/custom.scss", "public/css")
.options({
processCssUrls: false,
postCss: [tailwindcss("tailwind.config.js")],
output: {
path: "birdboard",
publicPath: "/dist/js/",
filename: "./dist/js/bundle.js"
}
});
Also check your tailwind.config.js file for formatting issues, my version follows this simple layout.
module.exports = {
theme: {
screens: {
sm: "576px",
// => #media (min-width: 576px) { ... }
md: "960px",
// => #media (min-width: 960px) { ... }
lg: "1440px"
// => #media (min-width: 1440px) { ... }
},
backgroundColor: theme => ({
page: "var(--page-background-color)",
card: "var(--card-background-color)",
button: "var(--button-background-color)",
header: "var(--header-background-color)"
}),
colors: {
error: "var(--text-error-color)",
grey: {
default: "rgba(0, 0, 0, 0.4)",
lighter: "#F5F6F9"
},
white: {
default: "#fff"
},
blue: {
default: "#47cdff",
light: "#8ae2fe"
},
default: "var(--text-default-color)",
accent: {
default: "var(--user-accent-color)",
light: "var(--text-accent)"
},
muted: {
default: "var(--text-muted-color)",
light: "var(--text-muted-light-color)"
}
},
boxShadow: {
default: "0 0 5px 0 rgba(0, 0, 0, 0.08)",
blue: "0 2px 7px 0 #b0eaff"
},
extend: {}
},
variants: {},
plugins: []
};
Just as a quick note. You could try 'bg-rose-500' which is very similar to the color you was trying to add.
I use 'npm run dev' to build my assets in Laravel & Tailwind
This is for one-off colours using TailwindCSS
Arbitrary values
If you need a one-off custom color in your project, consider using Tailwind’s arbitrary value notation to generate a class for that color on-demand instead of adding it to your theme:
<button class="bg-[#1da1f2] text-white ...">
<svg><!-- ... --></svg>
Share on Twitter
</button>