1085Tailwind Utility Scripts

Instead of yyping the whole Tailwind command, here are some small scripts:

tailwind_watch

npx tailwindcss -i ./styles/input.css -o ./styles/output.css --watch

tailwind_build

npx tailwindcss -i ./styles/input.css -o ./styles/output.css --build

tailwind_minify

npx tailwindcss -i ./styles/input.css -o ./styles/output.css --minify

Make scripts exectuable with chmod +x scriptname.

Calling the scripts:

./tailwind_watch
./tailwind_build
./tailwind_minify

948Adding a CSS Framework to Vue

In your Vue Project, add your favourite CSS Framework vis npm.

npm install tachyons --save-dev

In main.js add:

import 'tachyons/css/tachyons.min.css' 
// no need for ./../node_modules/ prefix

Adding a Static CSS File

Add style.css to /public/:

In /public/index.html reference the Style Sheet:

<link rel="stylesheet" type="text/css" href="style.css">

892Underlining Text in CSS

Standard Underline, Standard Underline, Hamburgefonts

.standard-underline { text-decoration: underline; }

Bottom Border, Bottom Border Over, Hamburgefonts

.bottom-border { border-bottom: 2px solid red; }

Box Shadow, Box Shadow, Hamburgefonts

.box-shadow { box-shadow: inset 0px -3px 0 #72caff; }

Box Shadow, Box Shadow, Hamburgefonts

.box-shadow { padding-bottom: 2px; box-shadow: inset 2px -2px 0 yellow; }

872Funky CSS Selectors

https://www.w3.org/TR/css3-selectors/#attribute-substrings

[att=val] code[class="language-"] { } <code class="language-c language-js"> Represents an element with the att attribute whose value contains at least one instance of the substring "val". If "val" is the empty string then the selector does not represent anything.
[att^=val] Represents an element with the att attribute whose value begins with the prefix "val". If "val" is the empty string then the selector does not represent anything.
[att$=val] Represents an element with the att attribute whose value ends with the suffix "val". If "val" is the empty string then the selector does not represent anything.