When I run:
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
My output.css gets mostly deleted, and only contains a handful of tailwind css, see image:
I have to run:
npx tailwindcss-cli#latest build ./src/input.css -o ./dist/output.css
to rebuild the file which gets all the tailwind css see:
But when I run:
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
it deletes the output.css again!
I've cleared the NPM cache, re-installed Tailwindcss on a new project and it produces the same issue.
Any help would be welcome, just starting out with backend programming!
If you use the build command tailwind iterate over your content and check which styles you are use. The other styles are purged. That is a feature of tailwind and makes sure you don't load all the overhead styles you don't use into the CSS file.
Related
everything work fine, but this time I want to push my code to production
using netlify, which is ok in development
but in production isn't get shown
and I know also why:
this is happening because the dist folder is inside .gitignore
but I want to ask if there is way to generate tailwind inside "scripts"
now I have this:
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"twcss": "npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css --watch"
},
is there a way to npm run build with npm run twcss && vite build
but && means the same time run two scripts.
but I want to do first the tailwind then vite build
another problem is that tailwind don't exit but continue infinitely
so is will never compile the build if the twcss don't finish
for now the script should run on the build time netlify and not on the development.
and I have this netlify config
that is config correctly CSS js svelte to compile but not tailwind
this happen to me also before.
I believe that in the script of tailwind, delete the --watch flag
❌
npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css --watch
✅
npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css
this edit will make a tailwind exit when compiles everything, and will not wait for upcoming changes.
so it will make this the best choice for production!
in netlify write this command
npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css && vite build
so with && (that it will not give bugs anymore now)
with this order:
tailwind
vite build
attention: vite build need to be always at the end
now also the CSS of the tailwind will be minified (inside the same CSS file of svelte),
so it is also production ready. (like the svelte/JS code you tell us before)
why you have --flag without knowing?
yes you have it because you used the example on the tailwind docs,
which is good for development or static websites
because of reloading on every change/class added in html
but like you said is impossible to stop (in netlify)
Context: I need to run a command every time Tailwind's just-in-time compiler ran a new build in watch mode. To be more specific, I need to rebuild Drupal's cache for the changes to take effect.
Unfortunately, watching for modifications of output.css with inotifywait doesn't work because the JIT compiler doesn't recreate output.css in all circumstances. For example, if you add the border-2 class for the first time, a new version of output.css is built. However, if you remove border-2 again, the compiler won't recreate output.css for legitimate reasons. See JIT compilation doesn't remove unused classes when the DOM changes · Issue #57 · tailwindlabs/tailwindcss-jit.
I also tried using tee and watching the output file with inotifywait without success. npx tailwindcss -i input.css -o output.css --watch | tee tailwind-built doesn't write to tailwind-built for reasons I don't get.
I found a solution based on tee finally.
Problem was that Tailwind's CLI at the time of writing uses console.error (see here) to report
Rebuilding...
Done in 33ms.
So npx tailwindcss -i input.css -o output.css --watch 2>&1 | tee tailwind-built (added 2>&1) and watching tailwind-built with inotifywait does the trick.
I'm trying to generate tailwindcss to last.css file with npx on Ubuntu.
Npx version --> 6.14.4
Ubuntu ---> 20.04
However it isn't working.
My code it's the next:
npx tailwindcss build src/styles.css -o public/last.css
This it's the mistake I'm receiving.
Invalid or unexpected token
Thanks!
try this:
npx tailwindcss -i src/styles.css -o public/last.css
this will generate a css file from src/styles.css to public/last.css
if you want to minify try this:
npx tailwindcss -i src/styles.css -o public/last.css --minify
and if you want it to purge unused styles you can try Purgecss
When I try to use the replace and watch attributes for the same file(s), I get an infinite loop, meaning that the watch notices the change that e.g. autoprefixer just made to the file and thus starts the command again and again.
Here is the command that I put into an NPM script or use on the command line:
postcss css/*.css -u autoprefixer --replace --watch
(or as shortform: postcss css/*.css -u autoprefixer -r -w)
It basically all works (autoprefixes are applied, the file is replaced and watched), the only problem is the infinite loop. So, is it possible to use --watch and --replace for the same file or directory?
Use the --poll option too:
postcss css/*.css -u autoprefixer --replace --watch --poll
The docs are sparse about it, but it works in v3.2.0 of postcss-cli.
I was struggling with setting up libsass as it wasn't as straight-forward as the Ruby based transpiler. Could someone explain how to:
install libsass?
use it from command line?
use it with task runners like gulp and grunt?
I have little experience with package managers and even less so with task runners.
I picked node-sass implementer for libsass because it is based on node.js.
Installing node-sass
(Prerequisite) If you don't have npm, install Node.js first.
$ npm install -g node-sass installs node-sass globally -g.
This will hopefully install all you need, if not read libsass at the bottom.
How to use node-sass from Command line and npm scripts
General format:
$ node-sass [options] <input.scss> [output.css]
$ cat <input.scss> | node-sass > output.css
Examples:
$ node-sass my-styles.scss my-styles.css compiles a single file manually.
$ node-sass my-sass-folder/ -o my-css-folder/ compiles all the files in a folder manually.
$ node-sass -w sass/ -o css/ compiles all the files in a folder automatically whenever the source file(s) are modified. -w adds a watch for changes to the file(s).
More usefull options like 'compression' # here. Command line is good for a quick solution, however, you can use task runners like Grunt.js or Gulp.js to automate the build process.
You can also add the above examples to npm scripts. To properly use npm scripts as an alternative to gulp read this comprehensive article # css-tricks.com especially read about grouping tasks.
If there is no package.json file in your project directory running $ npm init will create one. Use it with -y to skip the questions.
Add "sass": "node-sass -w sass/ -o css/" to scripts in package.json file. It should look something like this:
"scripts": {
"test" : "bla bla bla",
"sass": "node-sass -w sass/ -o css/"
}
$ npm run sass will compile your files.
How to use with gulp
$ npm install -g gulp installs Gulp globally.
If there is no package.json file in your project directory running $ npm init will create one. Use it with -y to skip the questions.
$ npm install --save-dev gulp installs Gulp locally. --save-dev adds gulp to devDependencies in package.json.
$ npm install gulp-sass --save-dev installs gulp-sass locally.
Setup gulp for your project by creating a gulpfile.js file in your project root folder with this content:
'use strict';
var gulp = require('gulp');
A basic example to transpile
Add this code to your gulpfile.js:
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('./sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
$ gulp sass runs the above task which compiles .scss file(s) in the sass folder and generates .css file(s) in the css folder.
To make life easier, let's add a watch so we don't have to compile it manually. Add this code to your gulpfile.js:
gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});
All is set now! Just run the watch task:
$ gulp sass:watch
How to use with Node.js
As the name of node-sass implies, you can write your own node.js scripts for transpiling. If you are curious, check out node-sass project page.
What about libsass?
Libsass is a library that needs to be built by an implementer such as sassC or in our case node-sass. Node-sass contains a built version of libsass which it uses by default. If the build file doesn't work on your machine, it tries to build libsass for your machine. This process requires Python 2.7.x (3.x doesn't work as of today). In addition:
LibSass requires GCC 4.6+ or Clang/LLVM. If your OS is older, this version may not compile. On Windows, you need MinGW with GCC 4.6+ or VS 2013 Update 4+. It is also possible to build LibSass with Clang/LLVM on Windows.
The installation of these tools may vary on different OS.
Under Windows, node-sass currently supports VS2015 by default, if you only have VS2013 in your box and meet any error while running the command, you can define the version of VS by adding: --msvs_version=2013. This is noted on the node-sass npm page.
So, the safe command line that works on Windows with VS2013 is:
npm install --msvs_version=2013 gulp node-sass gulp-sass
npx node-sass input.scss out.css
In Windows 10 using node v6.11.2 and npm v3.10.10, in order to execute directly in any folder:
> node-sass [options] <input.scss> [output.css]
I only followed the instructions in node-sass Github:
Add node-gyp prerequisites by running as Admin in a Powershell (it takes a while):
> npm install --global --production windows-build-tools
In a normal command-line shell (Win+R+cmd+Enter) run:
> npm install -g node-gyp
> npm install -g node-sass
The -g places these packages under %userprofile%\AppData\Roaming\npm\node_modules. You may check that npm\node_modules\node-sass\bin\node-sass now exists.
Check if your local account (not the System) PATH environment variable contains:
%userprofile%\AppData\Roaming\npm
If this path is not present, npm and node may still run, but the modules bin files will not!
Close the previous shell and reopen a new one and run either > node-gyp or > node-sass.
Note:
The windows-build-tools may not be necessary (if no compiling is done? I'd like to read if someone made it without installing these tools), but it did add to the admin account the GYP_MSVS_VERSION environment variable with 2015 as a value.
I am also able to run directly other modules with bin files, such as > uglifyjs main.js main.min.js and > mocha