I'm developing a small website with Laravel and Tailwind on shared hosting. I can use a command line tool on host. In the local environment tailwind works without problem but after npm run prod most of the Tailwind functionalities are missing and the app.css and app.js seem to have errors.
e.g. scaling on hover -> transform hover:scale-105 duration-200 doesn't work on host.
I tried importing Tailwind with cdn but it can't be a permanent solution.
What am I doing wrong??
I looking for an answer for days with no luck
I assume locally you run npm run dev and on production npm run prod. By default the development version of Tailwind does not remove unused style specification. But when with npm run prod unused styles are purged for production usage.
As you can read in the docs the the paths to your templates should be configured in the purge section of your tailwind.config.js.
module.exports = {
purge: [
'./src/**/*.html',
'./src/**/*.vue',
'./src/**/*.jsx',
],
// .. more ..
See docs:
This list should include any files in your project that reference any of your styles by name
If you don't configure these paths, Tailwind does not know which classes you use and will therefore purge all styles it does not find, f. ex. your hover:scale-105.
Solution "dirty":.
You run npm run dev in production which will result in a large build of your css, but fixes the problem for now.
Solution "clean":.
You configure your paths correctly, let Tailwind correctly recognize it and purge unused styles... and be happy.
You can test this also in your development environment by running npm run prod and see what happens.
The app.css file after npm run production still has some warnings and when I upload it in the host the warnings are becoming errors. Here is a screenshot.
However when I use the file after npm run dev everything works fine. Maybe I'm having collisions between Tailwind classes. I will come up with an answer.
Related
i know tailwindcss cli creates only the used class of the project in according with "content" options in tailwins.config.js.
but... is there a way to evitate this optimization (not considering content options and the written code) and let it creates ALL classes in according with the rest of configuration file???
I would like to create a styles lib by tailwind but not on a specific project. I would like create that lib in an angular library to share it then. Any ideas?
UPDATE: i found a command "tailwindcss-cli build -o <output.file>" that create all css from config. It create a very big file but i ma not so confident with it. I don't understand is tailwindcss-cli and tailwindcss are the same. I seems no in fact i can't have the same result using tailwindcss build bue if i call help on both cli i get the same.
thanks
If you are using Laravel, you have to run:
npx tailwindcss-cli build -o public/css/app.css
It will generate all styles (3MB file size). After finishing your application, you can run again:
npm run dev
to remove all unused styles, as it will take only used styles from your php code.
Some classes like text-green-500, rounded are having effect and the styling is updated.
Ohter classes, like bg-black, don't have any effect on the styling.
I am using Jetstream and TailwindCSS.
I have solve this problem before with this :
npm run prod
this might help you
There are plenty of possibilities which may cause this, but as a kind of a workaround you could use the safelist in the tailwind.config.js, as follows:
purge: {
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],
safelist: [
'rounded',
'text-green-500',
],
},
and don't forget to run npm run dev.
p.s. for some reason, sometimes npm run dev is not enough and I have to go for npm run watch, and ctrl+c it after the mix recompile is over. Don't know what could the reason be, but it helped.
If you add some html with tailwind CSS elements not used before then just run 'npm run dev' and that should add the CSS classes.
After that, you can start the server using 'php artisan serve'
While you're developing run npm run watch, it will refresh the CSS requirements whenever you save a page.
npm run prod is for once you have finished developing and want to put the site into production.
As suggested by #DaviMendesDev you need to run npm to compile your classes for use.
npm run dev
or
npm run prod
this will generate .css files you can use.
I have project in made Laravel. In scss file I've made changes (font-size and color) but I don't know how the css file is generated. Because I can't see changes in css file.
In Laravel documentation I see that css is generated in this way: mix.sass('resources/sass/app.scss', 'public/css');
but I don't know how to run this command.
If you have installed node and npm in your machine and already run below command
npm install
Then you need to follow two step.
Step-1:In your project root folder,there is file name wbpack.mix.js or your/project/dir/wbpack.mix.js and you may edit this file as you want
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
Step-2: After editing this file, you need to run this command
npm run dev
with this command compiling would be start and after ending,you may reload your browser to see the changes. cntrl+F5 for fresh loading.
Otherwise download node & install it,npm will came over with node. And run first command and follow those two step.
Tip: if you changes your scss file or js constanly for the time being, you may run this command
npm run watch
Because,if you have changes in your scss and js file,you need to run over and over npm run dev to recompile your code.But if you have run npm run watch, it will automatically recompile,whenever you hit cntrl+s.
Before compiling your CSS, install your project's frontend dependencies using the Node package manager (NPM):
npm install
Once the dependencies have been installed using npm install, you can compile your SASS files to plain CSS using Laravel Mix. The npm run dev command will process the instructions in your webpack.mix.js file.
npm run dev
I created a Geonode project following the instructions of geonode-project GitHub repo.
After running the instance for development using the respective docker-compose files I tried to apply changes to site_index.html and site_base.css files.
The changes on the html file are ok however the css changes are not assumed, only if I run the collectstatic command.
Since I'm running it in dev I was expecting that the collectstatic would not be necessary.
I tried to add the volume -./my_geonode/static/css:/mnt/volumes/statics/static/css in the django service on the docker-compose.development.override.yml file but even so t doesn't work. When I enter in the django container and open the file/mnt/volumes/statics/static/css/site_base.css my change is there though.
Doing developments and run the collectstatic at every css change is annoying. Am I doing something wrong? Please help.
Thanks
im trying to install PhantomJS in a MeteorApp.
I have done those step:
Add the npm package
meteor add meteorhacks:npm
Run meteor to let the npm package to pre-initialise
meteor
A file packages.json has been created at the root. Edit it to:
{
"phantomjs": "1.9.13"
}
A this point everything seem to work. But i try to test with this exemple that ive found here :
https://github.com/gadicc/meteor-phantomjs
But i dont understand where to put my phantomDriver.js
Why is phantomDriver.js is in assets/app/phantomDriver.js... but after, they say to create the file in ./private/phantomDriver.js...
Thank for clear explication :)
In development mode you create the file in /private/phantomDriver.js. When you build a meteor app it refactors everything into an application bundle which can be run.
After meteor builds your app it stores stuff from private into assets. For phantomjs to execute this file it needs to look in this directory. You don't have to create it. This is how meteor works internally.
If you look in your .meteor/local/build/programs/server directory the assets directory is there with anything you placed in private.
From the context of where your meteor code runs (the server directory above) the assets directory runs from this directory when your project is running.
Keep in mind when you deploy your app it loses its entire project structure and becomes something else. Gadi's phantomjs project is designed to work in production environments too.
TLDR; Don't worry about the assets directory, keep your file in /private/phantomDriver.js. Meteor should take care of the rest.