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?
Related
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 am total beginner in programming and just started to learn HTML/CSS.
For coding I started to use VS Code. And I really like it.
Only problem so far, what I got, is auto compiling of SCSS to CSS.
I have searched and read many solutions, and the best what I found was with ruby + sass + code in VS Code terminal sass --watch . It is watching my project and creating new CSS when new SCSS is created. And it is watching for changes in SCSS. But problem is that this code must be entered each time I am starting VS Code.
Tried also solution with Gulp file and package.json, but also could not make it start automatically. And it has to be made for each project separately.
I tried also Atom, and it has sass-autocompile package, and it works perfectly. So, simplest way for me would be to use Atom and forget. But I would like to use VS Code though.
So, generally question is if there would be possibility to create extension for VS Code to automate SCSS compilation to CSS (similar to Atom's package, which would be the best IMO). Or maybe somebody could explain me other way how to solve this problem.
You will need two things:
tasks.json file
Blade Runner extension for VS CODE
Start by creating .vscode folder in your project.
Then in it create tasks.json file with the following content:
{
"version": "0.1.0",
"command": "sass",
"isShellCommand": true,
"args": ["--watch", "."],
"showOutput": "always"
}
Now, after opening the project you can run the task by clicking Ctrl+Shift+B.
To automate the process use Blade Runner extension - https://marketplace.visualstudio.com/items?itemName=yukidoi.blade-runner
Blade Runner will run the task automatically after opening the project :)
A solution without additional extensions
With sass
Assuming you have sass installed globally with for instance:
npm install -g sass
Open the folder and create a task.json file under .vscode containing
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "Watch Sass",
"type": "shell",
"command": "sass --watch src/style.sass styles/style.css --style=compressed",
"problemMatcher": [],
"group": {
"kind": "build",
"isDefault": true
},
"runOptions": {
"runOn": "folderOpen"
}
}]
}
With node-sass
Replace sass with node-sass in the above.
In both cases make sure the source/destination filename, location and extension are correct (in my case src/style.scss and style/style.css)
With a Workspace file
Or copy the section in your .vscode-workspace file to avoid clutter of .json files.
Make sure to change the sass source and destination files to your personal needs.
Setup VSCode
[EDIT] whith the current version this is asked the first time you open the workspace file and the following steps are no longer needed.
To a llow automatic run tasks
Ctrl+Shift+P
select Manage automatic Tasks and
select Allow Automatic Tasks in Folder and
close and reopen your folder (or Workspace)
The sass compiler will be called and starts watching all your edits with a reassuring:
Compiled css\src\style.sass to css\style.css.
Sass is watching for changes. Press Ctrl-C to stop.
or with error messages when compilation failed.:
Error: semicolons aren't allowed in the indented syntax.
╷
7 │ padding: 0;
│ ^
╵
css\src\_base.sass 7:12 #import
css\src\style.sass 1:9 root stylesheet
Or use Easy Compile - it will auto compile on save.
https://marketplace.visualstudio.com/items?itemName=refgd.easy-compile
There already is an official document out there
https://code.visualstudio.com/docs/languages/css#_step-3-create-tasksjson
Only tip we can consider here is put an argument of --watch just not to build manually by hitting ctrl+shift+b every time.
// Sass configuration
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "Sass Compile",
"type": "shell",
"command": "sass --watch styles.scss styles.css",
"group": "build"
}
]
}
Without any plugins, you can create .vscode folder in your project and just write some tasks.json
Easy Compile or Live SASS Compiler extensions for Visual Studio Code.
The Live SASS Compiler can recompile all sources, whereas Easy Compile just compiles a single file.
Easy Compile compiles when you save a file, whereas Live SASS Compiler can be made to watch your code and compile when it sees a change. You must manually start it every time, whereas Easy Compile runs out of the box.
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.
Title says it all. I still use Grunt, though it feels like I should be using Gulp.
Nonetheless, rather than alt-tabbing to a CMD window, I'd like to use the palette or shortcut keys to kick off some Grunt tasks. Reading the docs, it looks like I'd need to write a json task. What??? That's like writing a Grunt task to run a Grunt task.
Has anybody else already written a generic VSCode task for running Grunt?
EDIT:
Thanks to the accepted answer, here is what I'm running:
{
"version": "0.1.0",
"command": "grunt",
"isShellCommand": true,
"tasks": [{
"taskName": "default"
},{
"taskName": "stage"
},{
"taskName": "dist"
}]
}
I open the palette, and see default, stage, dist. Not sure if that's the best way, but it works so far. Definitely room for improvement.
The most recen update to VSC has auto-detects grunt (and gulp tasks) so you can now just use cmd+p then type task (notice the space at the end) and VSC will show you the available tasks to run.
More info at: https://code.visualstudio.com/Docs/editor/tasks
In the default tasks.json file, you can just modify the gulp example to be used for grunt. In my current project, I just need to run grunt in the root directory, so mine looks like this:
{
"command": "grunt",
"isShellCommand": true
}
You can also modify the existing tasks option to add specific tasks to run in your build.
Now (version 1.24.1+), there is a Tasks Menu. Run Task will give you a list.
I'm evaluating task runners, Grunt and Gulp in particular, but there's one thing I dislike about both of them: the fact that they require a package.json file for your project. This is even though your project might not even be an npm project in the first place. In my case, I'm already using composer.json, which basically does the exact same thing.
I ended up creating my package.json like this:
{
"name": "myproject",
"version": "0.0.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-phpcs": "~0.2.3",
"grunt-phplint": "0.0.5",
"grunt-phpdocumentor": "~0.4.1"
}
}
Note that I'm not maintaining the version number, as that is unnecessary overhead. This works though, in the sense that I can run my grunt tasks after executing npm install. I feel that I should be able to do without this file though. I read that it's possible to use Grunt without a package.json, but my take is that you'd then have to install the node modules manually, which is more overhead. Gulp is no different, or at least I found no evidence to the contrary.
So the question is, are there any task runners that don't require you to define your project's metadata twice, need only a single file, and are not too bleeding edge?
Answering myself, the only thing I could find that seems to fit my requirements is bldr. It is PHP based, uses composer as package management backend, and does it without hijacking the composer.json you might already be using, as it uses bldr.json instead. It also does not require you to add metadata to the file that describes your bldr dependencies. Here's an example dependencies file (taken from http://docs.bldr.io/en/latest/blocks.html):
{
"require": {
"acme/demo-block": "#stable"
}
}
Then, when you run bldr install, your dependencies are installed and you can run your bldr tasks.