Level 35
Does it work in development when vite is just watching and so hasn't purged out all unused classes from tailwind?
May 29, 2023
4
Level 1
Laravel/Tailwind css
I have deployed a website using laravel jQuery and tailwind, my website is deployed on mutual hosting, so I have used cpanel to manage it, The problem is the css is not working properly for example i have some buttons controlled with jQuery if I clicked it will toggle class active and text color in this case the background changed but the text color not changed https://vidmate.onl/ , in some jQuery functions change text of a div take time or it will changed if click two times. I'm using vite and npm run prod to generate the assets. So is there any config especially for those hosting? Or how I can fix those issues, I'm thinking of returning to bootstrap if there is no solution.
Level 122
@Ben Taylor purging is not used any more
check your browser dev tools, network tab and look for any red entries showing assets that could not be loaded
Level 1
Hello, Check asset paths: Ensure that the paths to your CSS and JavaScript files are correctly configured in your Laravel project. Double-check that the asset URLs are pointing to the correct location. Clear cache: Clear any caching mechanisms that may be in place on the shared hosting server. This can help ensure that the latest CSS and JavaScript files are being served to the browser. Verify file permissions: Make sure that the files and directories in your project have the proper permissions set. They should be readable by the web server. Check error logs: Look for any error messages or warnings in the server logs or Laravel error logs that could indicate issues with file permissions, server configuration, or resource loading. Use absolute URLs: Consider using absolute URLs for your assets instead of relative URLs. This can help avoid issues with path resolution on shared hosting environments. Use the appropriate version of jQuery: Ensure that you are using a compatible version of jQuery with your Laravel, Tailwind, and other dependencies. Incompatibilities between jQuery versions and other libraries can cause issues. Consider using a different hosting solution: If the issues persist and are specific to the shared hosting environment, you might consider exploring other hosting options that better support your Laravel and frontend stack, such as a VPS or dedicated server. https://www.mykfcexperience.website/
Level 2
in order for Tailwind to generate all of the CSS you need, it needs to know about every single file in your project that contains any Tailwind class names:
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./resources/js/**/*.tsx',
"./node_modules/react-tailwindcss-datepicker/dist/index.esm.js"
],
in the config file you can specify those paths, if the classes are not found in any of the specified files the class is not included in the output css. check if the JS files are included in the section mention above of the config file.
'./resources/js/*.js',
As an alternative you can use the safe list option of config file, the classes included in this array will always be compiled even if are not found in any of the places specified in the content option:
safelist: [
'bg-red-500',
'text-3xl',
'lg:text-4xl',
]
Please or to participate in this conversation.