I am using PUG + Tailwind + PostCSS for a static, single page HTML file which is generated using basic NPM scripts (shown below)
I would like the final HTML to have the tailwind styles inlined directly in the index.html page, instead of being generated as a .css file which is them referenced in the index.html file.
Instead of using an external file:
link(rel="stylesheet" href="styles.css")
I want this:
<style>
// all my (tailwind) CSS here
</style>
Obviously the injection has to happen after Pug has compiled and also tailwind has been compiled.
My question is, is there a Tailwind plugin or is a PostCSS-cli plugin/setting?
I have been searching for a few hours without luck.
Here's my NPM scripts:
"start": "npm run build && npm run css",
"build": "pug -O src/data/index.js -P -w src/html/index.pug -o dist",
"css": "postcss -o ./dist/styles.css ./src/css/*.css --watch",
You could always disable the css "cleaning", compile your css independently of the pug and link them together with webpack.
See this question and this webpack plugin.
Hope it helps, for once. At least it would work.
You could simply inject the css file into your html after any build commands, with a script like this:
#!/bin/bash
# inject_css.sh
cp index.html output.html
echo "<style>" >> output.html
cat dist/styles.css >> output.html
echo "</style>" >> output.html
Then, add this script after your build rules in your NPM script like so:
"start": "npm run build && npm run css && ./inject_css.sh"
>> Appends text to a file. In this case, we're adding an opening style tag, then concatenating output.css, then finally, closing the style tag and you should have all your compiled css code directly inside a style tag in your HTML.
You could go with using Play CDN
Use the Play CDN to try Tailwind right in the browser without any build step. The Play CDN is designed for development purposes only, and is not the best choice for production.
<!doctype html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script> 👈 Inject it here
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
Related
I'm using TailwindCSS 2, vue 3, in an adonisjs project.
I have a simple html button, which when clicked should toggle to dark mode on/off.
If I use the tailwindcss cdn version, and set darkmode in the config in the html, everything works fine. If I use my css, it doesn't. I guess I'm missing some step.
My tailwind.config.js does have the darkMode: 'class' definition
content: ["./resources/**/*.{edge,js,ts,jsx,tsx,vue}"],
darkMode : 'class',
options: {
safelist: ['dark']
},
I prepare the css using the command:
npx tailwindcss -i resources/css/style.css -o resources/css/app.css
I load the asset using adonisjs assets
<link href="{{asset('assets/css/app.css')}}" rel="stylesheet">
when I click in the button, I can see that the html tag now has the "dark" class, but nothing happens. The background does not change. The body tag has "dark:bg-slate-800" definition.
But like I said, if I use the cdn version, everything works.
Am I missing a configuration step?
I fixed my issue doing a few things:
reinstalled the packages described here https://tailwindcss.com/docs/guides/adonisjs (maybe I had missed something)
moved my css to app.css
added an style entry point in webpack.congfig.js:
Encore.addStyleEntry('style', './resources/css/app.css')
now I load my css using:
#entryPointStyles('style')
now when I run "npm run dev" I guess tailwind is run under the hood by webpack and everything is working
Question:
I'd like to use a plugin (daisyUI) for TailwindCSS in one of my Svelte components. It looks like style information leaks from this component and affects the entire site. How can I avoid this?
I don't think this is related to daisyUI specifically.
Below I'm describing a minimal reproducible example based on sveltekit. But the problem is not related to sveltekit. I'm encountering this in the development of a webextension which doesn't use sveltekit. The sveltekit setup is only to make the smallest possible demonstration for this question.
To illustrate the problem, I've set up a sveltekit skeleton project, then added one single additional svelte component which uses Tailwind. When I add the plugin, the background color of my page turns from white to gray. I don't understand how this can happen, as far as I can see, I'm only using Tailwind within that component. But the style seems to leak.
Minimal example on github:
Fastest way to reproduce:
git clone git#github.com:lhk/minimum_example.git
cd minimum_example
npm install
npm run dev -- -- open
Now you can edit tailwind.config.cjs and add/remove the plugin:
plugins: [
//require("daisyui")
],
Step-by-step explanation
I'd like to use Svelte together with Tailwind and DaisyUI.
Here's a minimal project setup
# choose the skeleton project, typescript syntax and no to everything else
npm create svelte#latest minimum_example
cd minimum_example
npm install
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init tailwind.config.cjs -p
npm i --save-dev daisyui
Now edit tailwind.config.cjs:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{html,js,svelte,ts}'], theme: {
extend: {},
},
plugins: [
//require("daisyui")
],
}
Add a new Svelte component under src/components/Problem.svelte:
<p class="bg-blue-700">Using Tailwind class</p>
<style lang="postcss">
#tailwind base;
#tailwind components;
#tailwind utilities;
</style>
And include it in src/routes/+page.svelte:
<script lang="ts">
import Problem from "./../components/Problem.svelte";
</script>
<h1>Welcome to SvelteKit</h1>
<p>Visit kit.svelte.dev to read the documentation</p>
<Problem></Problem>
You can run the project with
npm run dev -- -- open
If you open the website you'll see the sveltekit skeleton app, plus one paragraph with a blue background (this is my test that Tailwind is working). Now you can uncomment the plugin in tailwind.config.cjs. The background of the page will turn gray.
I think this is a theme that somehow leaks from the Tailwind plugin to the entire site.
The way you use tailwind with svelte is quite wrong. The tldr answer is remove #tailwind directives and use #apply instead.
<p class="my-element">Using Tailwind class</p>
<style lang="postcss">
.my-element {
#apply bg-blue-700;
}
</style>
The way how svelte scopes styles is by using a unique class name alongside your custom selector, e.g. .my-element becomes .my-element.svelte-x57u2q. This also means you must use a selector so that this scoping mechanism can kick in.
But with vanilla tailwind, those builtin class names have to be global in order to be useful, in other word “leaked”. This is by design, not bug.
So if you want to use tailwind but also leverage svelte’s scoped style, #apply is the only solution.
The official doc has a section titled Using #apply with per-component CSS that reveals more technical details, I think it’s worth reading.
I'm trying to learn tailwindCss but the documentation shows the latest version
https://tailwindcss.com/docs/installation
which I followed to set up my first project, but the issue here is when I apply the utility class to my project it's not working. Here is my code
<body>
<h1 class="text-lime-400">Hello World of Joy </h1>
<hr>
</body>
here is the link to the generated styles by tailwindcss
<link rel="stylesheet" href="/public/styles.css">
Assalamu'Alaikum. Thank you for your question. As you are beginning with tailwind I suggest you to use CDN first. In Installation you will find Play CDN where you will copy only
<script src="https://cdn.tailwindcss.com"></script>
and paste in your head section of HTML.
after that all tailwind css code will run.
But if you wish to use it by installing then i suppose you got a package.json file. where you should write a script to build your css. and you need to build css. if you change anything in tailwind.config.js then you will need to rebuild the css again to effect the changed variants.
{
"name": "dims-web-1.1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build-css": "tailwindcss build src/style.css -o public/styles.css"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"tailwindcss": "^2.2.19"
}
}
here in scripts "build-css" is my custom code to build css. to build the css.
in terminal you need to write
npm run build-css
and hit enter to get your css in your public.css
then tailwind utility classes will work fine.
Thank You
By default, Angular 2 compiles the CSS into JavaScript, especially when using WebPack as in Angular-CLI. I would rather this not happen for a couple of reasons.
The first reason is that when I'm developing, I find it really helps to be able to see in the developer tools exactly what style sheet a specific style rule was coming from and what line number it was on. The second reason is that I think compiling CSS into the code kind of misses the point of good CSS, which is that you can apply a different style sheet and have an entirely different look and feel with the same markup.
Is there a flag somewhere that I can set to leave the CSS in .css files, where IMO it belongs?
This is the whole point of encapsulated components.
A component should have it's own styles encapsulated with it so it can be shipped with the styles.
Imagine you want to publish one of your components to be used by others, shouldn't it have its own styles with it ?
That means Angular needs a way to link those css to the component , thus seperates them into chunks and injects them into head tag.
To solve your problem though , you have couple of options :
1- Not using the Emulated Encapsulation :
Components by default have a property called encapsulation which is set to Emulated , you need to change it to None:
#Component({
encapsulation:ViewEncapsulation.None
})
Then , you can put all you css in the head tag your self like you'd do with a normal html page.
2- If the problem is theme ing , you can make your component themeable .
You can have a theme attribute for your component and then based on that change the styleing :
#Component({
selector:'my-component',
styles:[
`
:host{
[theme="blue"]{
change what ever you want :
h1{
color:blue;
}
}
}
`
]
})
And then , using this component would be like :
<my-component [attr.theme]='"blue"'></my-component> // would be blue theme
<my-component></my-component> // would be default
Go to your base Html file(where the root module, main app is injected) and link the CSS stylesheets in your header section.
Webpack will not include it in it's compiled/combined css file which is injected into the page. The css file will still be included at run time in the browser.
<html>
<head>
<base href="/">
<meta charset="utf-8">
<title>dummy</title>
<meta name="viewport" content="width=device-width">
//was not injected/modified by webpack
<link rel="apple-touch-icon" sizes="57x57" href="app/images/apple-icon-57x57.png">
//webpack's injected this below from other components's imported/inline css rules
<link href="index-c2cacb5fa3dfbca6116f4e4e63d5c3c7.css" rel="stylesheet"></head>
With angular-cli 1.6.5 you can do this:
ng serve --extract-css
You will still have the style-encapsulation features, but devtools will now point to the component css source file.
I use the angular-cli as well (v1.0.0-beta.22). When I am ready to build for production I run the following command:
ng build -prod -aot
This generates all my production-ready files (bundled, tree-shaken and minified etc). Of particular note is that it will generate two versions of the style sheets.
One in js:
styles.b2328beb0372c051d06d.bundle.js
And another version is plain css:
styles.4cec2bc5d44c66b4929ab2bb9c4d8efa.bundle.css
I run some post-processing on the css file with gulp and use the css version for my production build. I am not sure if the same holds true for lazy loading (where the cli will produced different chunks), but it works for sure when lazy loading is not being used (I haven't launched a production-ready project yet with lazy loading).
I also tried a build with JiT compilation:
ng build -prod
It also produced the raw/minified version of the css style sheet.
Now, I know for sure the folowing does NOT work:
ng build
This will produce all the css embedded within js file, styles.bundle.js.
Since you want to use the raw css file during development, the only workaround I can think of is that you run ng build -prod in order to get the css file. Copy/paste this manually into your assets folder. Run "format" on the file to un-minify the file. Then do a normal build with a modified index.html file referencing your raw css file, and removing the styles.bundle.js script reference. Not pretty, but it might work.
Put a wrapper class in html example-
<div class="component-1-wrapper">
all yout html here inside component-1-wrapper
</div>
Structure your sass(scss) in the following way. Since your styles are wrapped inside component-1-wrapper, therefore it will apply only to component-1-wrapperclass
.component-1-wrapper{
// all the styles for component-1 here
.class-hello{
// styles
}
}
You can compile your css with sass and put all the css(seperated by modules) in seperate folder.Start the filenames by _, sass can import them:
You can refer your styles-main.scss in app.ts file
#component({
styleUrls:['styles/styles-main.scss']})
The style-sheets will be structured this way and individual component's class styles will be applied to particular component since there is a wrapper class in html
Hope it helps!!!!!!
I have installed font-awesome 4.0.3 icons using npm install.
If I need to use it from node-modules how should I use it in html file?
If I need to edit the less file do I need to edit it in node-modules?
Install as npm install font-awesome --save-dev
In your development less file, you can either import the whole font awesome less using #import "node_modules/font-awesome/less/font-awesome.less", or look in that file and import just the components that you need. I think this is the minimum for basic icons:
/* adjust path as needed */
#fa_path: "../node_modules/font-awesome/less";
#import "#{fa_path}/variables.less";
#import "#{fa_path}/mixins.less";
#import "#{fa_path}/path.less";
#import "#{fa_path}/core.less";
#import "#{fa_path}/icons.less";
As a note, you still aren't going to save that many bytes by doing this. Either way, you're going to end up including between 2-3k lines of unminified CSS.
You'll also need to serve the fonts themselves from a folder called/fonts/ in your public directory. You could just copy them there with a simple gulp task, for example:
gulp.task('fonts', function() {
return gulp.src('node_modules/font-awesome/fonts/*')
.pipe(gulp.dest('public/fonts'))
})
You have to set the proper font path. e.g.
my-style.scss
$fa-font-path:"../node_modules/font-awesome/fonts";
#import "../node_modules/font-awesome/scss/font-awesome";
.icon-user {
#extend .fa;
#extend .fa-user;
}
Add the below to your .css stylesheet.
/* You can add global styles to this file, and also import other style files */
#import url('../node_modules/font-awesome/css/font-awesome.min.css');
You will need to copy the files as part of your build process. For example, you can use a npm postinstall script to copy the files to the correct directory:
"postinstall": "cp -R node_modules/font-awesome/fonts ./public/"
For some build tools, there are preexisting font-awesome packages. For example, webpack has font-awesome-webpack which lets you simple require('font-awesome-webpack').
Using webpack and scss:
Install font-awesome using npm (using the setup instructions on https://fontawesome.com/how-to-use)
npm install #fortawesome/fontawesome-free
Next, using the copy-webpack-plugin, copy the webfonts folder from node_modules to your dist folder during your webpack build process. (https://github.com/webpack-contrib/copy-webpack-plugin)
npm install copy-webpack-plugin
In webpack.config.js, configure copy-webpack-plugin. NOTE: The default webpack 4 dist folder is "dist", so we are copying the webfonts folder from node_modules to the dist folder.
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
plugins: [
new CopyWebpackPlugin([
{ from: './node_modules/#fortawesome/fontawesome-free/webfonts', to: './webfonts'}
])
]
}
Lastly, in your main.scss file, tell fontawesome where the webfonts folder has been copied to and import the SCSS files you want from node_modules.
$fa-font-path: "/webfonts"; // destination folder in dist
//Adapt the path to be relative to your main.scss file
#import "../node_modules/#fortawesome/fontawesome-free/scss/fontawesome";
//Include at least one of the below, depending on what icons you want.
//Adapt the path to be relative to your main.scss file
#import "../node_modules/#fortawesome/fontawesome-free/scss/brands";
#import "../node_modules/#fortawesome/fontawesome-free/scss/regular";
#import "../node_modules/#fortawesome/fontawesome-free/scss/solid";
#import "../node_modules/#fortawesome/fontawesome-free/scss/v4-shims"; // if you also want to use `fa v4` like: `fa fa-address-book-o`
and apply the following font-family to a desired region(s) in your html document where you want to use the fontawesome icons.
Example:
body {
font-family: 'Font Awesome 5 Free'; // if you use fa v5 (regular/solid)
// font-family: 'Font Awesome 5 Brands'; // if you use fa v5 (brands)
}
With expressjs, public it:
app.use('/stylesheets/fontawesome', express.static(__dirname + '/node_modules/#fortawesome/fontawesome-free/'));
And you can see it at: yourdomain.com/stylesheets/fontawesome/css/all.min.css
You could add it between your <head></head> tag like so:
<head>
<link href="./node_modules/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
</head>
Or whatever your path to your node_modules is.
Edit (2017-06-26) - Disclaimer: THERE ARE BETTER ANSWERS. PLEASE DO NOT USE THIS METHOD. At the time of this original answer, good tools weren't as prevalent. With current build tools such as webpack or browserify, it probably doesn't make sense to use this answer. I can delete it, but I think it's important to highlight the various options one has and the possible dos and do nots.
Since I'm currently learning node js, I also encountered this problem. All I did was, first of all, install the font-awesome using npm
npm install font-awesome --save-dev
after that, I set a static folder for the css and fonts:
app.use('/fa', express.static(__dirname + '/node_modules/font-awesome/css'));
app.use('/fonts', express.static(__dirname + '/node_modules/font-awesome/fonts'));
and in html:
<link href="/fa/font-awesome.css" rel="stylesheet" type="text/css">
and it works fine!
I came upon this question having a similar problem and thought I would share another solution:
If you are creating a Javascript application, font awesome icons can also be referenced directly through Javascript:
First, do the steps in this guide:
npm install #fortawesome/fontawesome-svg-core
Then inside your javascript:
import { library, icon } from '#fortawesome/fontawesome-svg-core'
import { faStroopwafel } from '#fortawesome/free-solid-svg-icons'
library.add(faStroopwafel)
const fontIcon= icon({ prefix: 'fas', iconName: 'stroopwafel' })
After the above steps, you can insert the icon inside an HTML node with:
htmlNode.appendChild(fontIcon.node[0]);
You can also access the HTML string representing the icon with:
fontIcon.html
If you're using npm you could use Gulp.js a build tool to build your Font Awesome packages from SCSS or LESS. This example will compile the code from SCSS.
Install Gulp.js v4 locally and CLI V2 globally.
Install a plugin called gulp-sass using npm.
Create a main.scss file in your public folder and use this code:
$fa-font-path: "../webfonts";
#import "fontawesome/fontawesome";
#import "fontawesome/brands";
#import "fontawesome/regular";
#import "fontawesome/solid";
#import "fontawesome/v4-shims";
Create a gulpfile.js in your app directory and copy this.
const { src, dest, series, parallel } = require('gulp');
const sass = require('gulp-sass');
const fs = require('fs');
function copyFontAwesomeSCSS() {
return src('node_modules/#fortawesome/fontawesome-free/scss/*.scss')
.pipe(dest('public/scss/fontawesome'));
}
function copyFontAwesomeFonts() {
return src('node_modules/#fortawesome/fontawesome-free/webfonts/*')
.pipe(dest('public/dist/webfonts'));
}
function compileSCSS() {
return src('./public/scss/theme.scss')
.pipe(sass()).pipe(dest('public/css'));
}
// Series completes tasks sequentially and parallel completes them asynchronously
exports.build = parallel(
copyFontAwesomeFonts,
series(copyFontAwesomeSCSS, compileSCSS)
);
Run 'gulp build' in your command line and watch the magic.
SASS modules version
Soon, using #import in sass will be depreciated. SASS modules configuration works using #use instead.
#use "../node_modules/font-awesome/scss/font-awesome" with (
$fa-font-path: "../icons"
);
.icon-user {
#extend .fa;
#extend .fa-user;
}