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.
Related
I set up TailwindCSS in a pretty typical way using the docs they provide. In my package.json, I have this:
"scripts": {
"build": "postcss css/tailwind.css -o public/build/tailwind.css"
},
And in my tailwind.config.js, I have this:
purge: {
// enabled: true,
// mode: 'layers',
// layers: ['base', 'components', 'utilities'],
// content: ['./sandbox/*.html', './home.ascx', './default.ascx', './partials/*.ascx', '../../../0/2sxc/Content/*.cshtml', '../../Containers/DNN-TailwindCSS/*.ascx'],
In my current workflow, I build my websites with the purge commented out so it outputs the whole thing. Then when I'm ready to deploy, I uncomment the purge and build it so it makes the file small by purging out the unused elements.
But I don't want to have to constantly turn the purge on and off when I'm working. I would rather have my npm run build create both the purged version and the full version at the same time but with different file names of course. Perhaps tailwind.css and tailwind.min.css. That way, I can easily swap out the stylesheet when I want to develop.
How do I set it up so npm run build outputs both versions? Or am I think about this the wrong way and should use a different method?
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.
I have a Symfony3 project and want to use SASS for my stylesheets.
I have looked up many pages and found Assetic related threads - but no "real" explanation, how to integrate SASS in a Symfony3 project.
Can't be too difficult, can it?
I would be glad to hear any hint or complete "how to" - thanks a bunch!
I create a separate frontend build process using NPM for this which can handle all images, SASS/CSS, and JS with compression etc. and then add a build step to generate everything.
If you don't have NPM, follow instructions to install: https://www.npmjs.com/get-npm
Initialise the project by running npm init in your project directory.
Install some tools for compiling and compressing:
npm install node-sass --save-dev this compiles SASS to CSS
npm install postcss-cli --save-dev this processes compiled CSS
npm install cssnano --save-dev this minifies CSS and is used as a plugin for postcss
npm install autoprefixer --save-dev this adds moz, webkit and vendor prefixes and is used as a plugin for postcss
npm install npm-run-all --save-dev this isn't strictly necessary but allows you to group commands which is helpful as you add more steps.
Once you've got these dependencies installed, you can add your build scripts. Open package.json and modify the scripts key.
{
"name": "your-project-name",
...
"scripts": {
"build-task:scss-compile": "node-sass --source-map true app/Resources/sass/app.sass -o web/css",
"build-task:css-minify": "postcss web/css/app.css --use cssnano autoprefixer -d web/css",
"build": "npm-run-all -p build-task:*"
},
...
}
You can now run npm run build. build-task:scss-compile will compile your SASS into a single, uncompressed CSS file in the web/css directory which can be linked to in your templates. Then build-task:css-minify will compress it and add any vendor prefixes to the CSS.
You can add more build tasks as mentioned above and chain them in this way. You can also add file watchers and a watch command which will run the build scripts when any watched files are modified.
Don't forget to add node_modules to your .gitignore file.
The reason I opt for a separate process over something like Assetic and leafo/scss as outlined in the Symfony docs is that Assetic filters add a lot of overhead to responses as they compress things on the fly which will slow down development considerably. It also separates concerns between application and presentation and gives you more flexibility to later build on and adapt your front end without touching your application.
EDIT: Here is a gist of a package.json file that will also copy jQuery, FontAwesome, anything in the assets directory including any images or fonts, compile and minify JavaScripts, after checking them for errors and create required directories if they don't already exist and a file watcher for building when files are modified:
https://gist.github.com/matt-halliday/6b9a3a015b7a87c5b165ce1a9ae19c9b
What I want to do is simply have a tool that can watch and auto prefix my css. Previously I was using pleeease.io, it is very straightforward for beginners like me, after install it through npm, what I need to do is to create an option file(.pleeeaserc), then do
pleeease watch
Afterwards, I can focus on my css, every time I make change to my css file, it gets processed and output.
Unfortunately it seems the author has stopped maintaining it, when I do
npm install pleeease
on my new server I got lots of errors and the installation failed.
I guess it is time for me to learn how to directly use autoprefixer, which I believe pleeease integrates as one of its dependencies.
However, I find the learning curve is a little too much for me: To use autoprefixer, I need to learn PostCSS; and PostCSS usually runs with Grunt or Gulp; to use task runners, I need to know something about npm and node.js. I know these are all useful tools which can save lots of my time, with them I can do much more than just autoprefixing. I will make deep dive into them later but under my current pressure I really need some shortcut like pleeease to get autoprefixer up and running, without having to digest all the documents and articles about PostCSS. I hope I can do something like
[postcss|autoprefixer|something else] watch
under my scss folder and every time I make change to and save input.scss, a output.scss file will be generated.
So I have some questions, in part of my effort on learning PostCSS and/or getting autoprefixer work as easy as possible:
1) To clarify, what is the relationship between PostCSS and PostCSS-cli? Does the latter depend on or include the former?
2) And does installing the latter merely enable the ability to use postcss command in command-line interface?
3) I did npm install -g postcss-cli but I still can't use postcss command, what did I do wrong?
4) To watch file change and automatically compile, do I need to use task runners like Grunt or Gulp along with PostCSS?
5) What is the difference between npm install postcss and npm install grunt-postcss?
"What I want to do is simply have a tool that can watch and auto prefix my css."
Yes you can do this easily with gulp, which you can get up and running in minutes. There are plenty of "getting started" walkthroughs online. You don't really need to know anything about PostCSS to use autoprefixer. This task below will compile all your sass, run autoprefixer and output a corresponding CSS file anytime you save a .scss file:
gulpfile.js
var gulp = require('gulp'),
$ = require('gulp-load-plugins')();
gulp.task('watch', () => {
gulp.watch('src/**/*.scss', ['sass']);
});
gulp.task('sass', () => {
return gulp.src('src/**/*.scss')
.pipe($.sass())
.pipe($.autoprefixer())
.pipe(gulp.dest('dest'));
});
1) To clarify, what is the relationship between PostCSS and PostCSS-cli? Does the latter depend on or include the former?
The answer to question 5 partly answer this question to what postcss is used for. The other is intended to be ran from the command line. PostCSS-cli is a binary, the other is an NPM package written in Javascript.
2) And does installing the latter merely enable the ability to use postcss command in command-line interface?
Yes.
3) I did npm install -g postcss-cli but I still can't use postcss command, what did I do wrong?
It's better to install locally like so:
npm i postcss-cli --save-dev
Then you can use like so:
node_modules/postcss-cli/bin/postcss -c config.json
Or, add a script in package.json like so:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "node_modules/postcss-cli/bin/postcss -c config.json",
"watch": "node_modules/postcss-cli/bin/postcss -c config.json -w",
"minify": "node_modules/postcss-cli/bin/postcss -c config-minify.json"
},
Note: Relative paths are not required in the scripts section. I put them in to show local usage of postcss-cli. You could simply use:
...
"build": "postcss -c config.json"
...
You can then run:
npm run build
4) To watch file change and automatically compile, do I need to use task runners like Grunt or Gulp along with PostCSS?
Nope. PostCSS-cli can do this:
node_modules/postcss-cli/bin/postcss -c config.json -w
Or, add as script to package.json as can be seen in my example above. Then you just run:
npm run watch
5) What is the difference between npm install postcss and npm install grunt-postcss?
The later is used for gulp, the former is used to build grunt-postcss, postcss-brunch etc.
To use autoprefixer with postcss-cli on the command line you do:
postcss --use autoprefixer --autoprefixer.browsers "> 5%" -o output.css input.css
This is listed in the docs and is pretty easy to follow.
I’m using grunt to develop a website, and was wondering if it’s possible to update bower dependencies in my project within my 'build' grunt task—so that when I build a production version of my project, everything is up–to–date?
Obviously, I know I could just execute bower update before grunt build:prod, but it would be one less step every time.
Just curious!
Grunt has this task called grunt-bower-task which can help you manage bower dependencies. Use the official grunt documentation to go through the details.
Found one possible solution:
I guess I could use grunt-shell to automate running the bower update command in a shell…
Just wondering if this is the most logical/sophisticated way of doing it. Any other suggestions?
Found a good solution—I’ll post it in case it’s of use to someone…
The grunt-bower-install-simple plugin allows you to update bower dependencies from a grunt task by setting the command option to update like so:
"bower-install-simple": {
options: {
color: true,
directory: "src/bower_components"
}
"prod": {
options: {
command: update,
production: true
}
}