Some Classes Have No Effect After Adding Tailwind.CSS to a Vue.Js Project

Tailwind CSS warning: No utility classes were detected in your source files

Fixed.. Asking in the discord community this was the response:

Thank you for supplying a remotely-hosted repository. It seems to work
fine for me, it could be that you're suffering from a bug that this PR
solves: https://github.com/tailwindlabs/tailwindcss/pull/9650. You
could temporarily try insiders version and see if that fixes it for
you
npm install tailwindcss@insiders

Why aren't the Tailwind classes taking effect in my Vite React project?

You should update the tailwind.config.js file to include .jsx files:

{html,js} => {html,js,jsx}

module.exports = {
content: ["./src/**/*.{html,js,jsx}"],
theme: {
extend: {},
},
plugins: [],
}

tailwind styles dont apply in vue js project

Problem solved.
Classname "bg-red" doesn't exist. I had to use a number to define color intensity, e.g. "bg-red-500"

Why some classes in tailwind is not present in laravel install?

Are you running npm watch? First you need to tell tailwind which files to track and than npm run watch.
Tailwind then reads all classes in the tracked blades and builds only those.

in guide its point 4 and 6
https://tailwindcss.com/docs/guides/laravel

Than you can add this mix.disableNotifications(); into webpack.mix.js to disable notification.

Some Tailwind styles not working in production with Next.js

For anyone seeing this in the future, just add the path to any new folder in the purge array into the tailwind config like this:

module.exports = {
purge: [
"./src/**/*.{js,ts,jsx,tsx}",
// Add more here
],
darkMode: 'class',
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}

December 2021 Update:

After TailwindCSS v.3, the config file is slightly different. The above configuration would be:

module.exports = {
content: [
"./src/**/*.{js,ts,jsx,tsx}",
// Add extra paths here
],
theme: {
extend: {},
},
plugins: [],
}


Related Topics



Leave a reply



Submit