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
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">
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;
}
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.