fedallbest/joplin-notes
Watch
1
0
Fork
You've already forked joplin-notes
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

initial

Browse source
This commit is contained in:
nm1 2026-11-04 00:33:23 +05:30
commit 74ae93a96e
4 changed files with 94691 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

195
joplin notion extension/Web Development/CSS/Tailwind/Extras.md Normal file
View file

@ -0,0 +1,195 @@
Extras
- with `npx tailwindcss init --full` we can have full configuratio of properties available at `tailwind.config.js` and we can add some properties with their values too like
```js
// in theme
fontSize: {
mammoth: ["10rem", { lineHeight: "1" }],
xs: ["0.75rem", { lineHeight: "1rem" }],
sm: ["0.875rem", { lineHeight: "1.25rem" }],
base: ["1rem", { lineHeight: "1.5rem" }],
lg: ["1.125rem", { lineHeight: "1.75rem" }],
xl: ["1.25rem", { lineHeight: "1.75rem" }],
"2xl": ["1.5rem", { lineHeight: "2rem" }],
"3xl": ["1.875rem", { lineHeight: "2.25rem" }],
"4xl": ["2.25rem", { lineHeight: "2.5rem" }],
"5xl": ["3rem", { lineHeight: "1" }],
"6xl": ["3.75rem", { lineHeight: "1" }],
"7xl": ["4.5rem", { lineHeight: "1" }],
"8xl": ["6rem", { lineHeight: "1" }],
"9xl": ["8rem", { lineHeight: "1" }],
},
```
here under fontSize we added mammoth so when we type `text-mammoth` in html we will get font-size as 10rem with line-height of similar size(10 rem in this case).
- instead of directly modyfying full tailwind.config.js we can do same with empty one which is created without using `full` flag.
```js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./public/**/*.{html,js}"],
theme: {c
extend: {
colors: {
primary: "#FF6363",
secondary: {
100: "#E2E2D5",
200: "888883",
},
},
},
},
plugins: [],
};
```
in html
```html
<ul>
<li
class="text-blue-900 font-bold text-xl p-4 m-4 border-2 border-solid border-gray-400"
>
<a href="#">
<span>Home</span>
</a>
</li>
<li>
<a href="#">
<span
class="bg-secondary-100 text-secondary-200"
>About</span
>
</a>
</li>
</ul>
```
&nbsp;
- **custom fonts**
in src/style.css import the font with CDN like this
```css
@import url(https://cdn.jsdelivr.net/fontsource/fonts/nunito:vf@latest/latin-wght-normal.woff2);
```
then in tailwind.config.js add this
```js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./public/**/*.{html,js}"],
theme: {
extend: {
fontFamily: {
body: ["Nunito"],
},
},
},
plugins: [],
};
```
finally in html
`<body class="font-body">` this will add the font 'Nunito'
&nbsp;
- **@apply Directive**
just like mixin in sass we can use apply directive to inherit the properties of other classs
in src/styles.css
```css
@import url(https://cdn.jsdelivr.net/fontsource/fonts/nunito:vf@latest/latin-wght-normal.woff2);
@tailwind base;
@tailwind components;
@tailwind utilities;
.card {
@apply relative bg-white rounded overflow-hidden shadow-md;
}
.badge {
@apply bg-secondary-100 text-secondary-200 text-xs uppercase font-bold rounded-full p-2 absolute top-0 ml-2 mt-2;
}
```
in public/index.html
```html
<div class="card">
<img
class="w-full h-32 sm:h-48 object-cover"
src="img/stew.png"
alt="stew"
/>
<div>
<span class="font-bold">5 Bean Chili Stew</span>
<span class="block text-gray-500 text-sm"
>Recipe by Mario</span
>
</div>
<div class="badge">
<span>25 mins</span>
</div>
</div>
```
&nbsp;
to fix bluish nature when using gray do this
```js
const colors = require('tailwindcss/colors')
module.exports = {
theme: {
extend: {
colors: {
// This overrides 'gray' classes to use the flat 'neutral' color palette instead
gray: colors.neutral,
},
},
},
}
```
- **Tailwind components**
https://merakiui.com/components
https://daisyui.com/
https://demos.creative-tim.com/soft-ui-design-system/presentation.html
https://www.hyperui.dev/
https://daily.dev/blog/10-free-tailwind-css-ui-kits-and-component-libraries-2024
[10 Free Tailwind CSS UI Kits & Component Libraries 2024 (15_3_2025 11_21_40 pm).u.zip.html](../../../../_resources/10%20Free%20Tailwind%20CSS%20UI%20Kits%20&%20Component%20Libraries.html)
&nbsp;
for !important use this
`ml-auto` to `!ml-auto`
tailwind group
eg:
```html
<div class="group bg-blue-200 p-4">
<p class="text-blue-800 group-hover:text-red-500">Hover over me!</p>
<button class="bg-gray-300 group-hover:bg-green-500">Click me</button>
</div>
```
tailwind peer class
The peer class in Tailwind CSS is a modifier used to style an element based on the state of its sibling elements. Group allows child elements to react to the state of their parent
Peer allows an element to react to the state of its sibling.
![125d3936b8ad863abf57a9a02664ed00.png](../../../../_resources/125d3936b8ad863abf57a9a02664ed00.png)
```html
<div class="pill">
<input type="checkbox" class="peer hidden" name="che1" id="che1" >
<label for="che1" class="max-w-[300px] opacity-50 peer-checked:opacity-100 cursor-pointer hover:opacity-80 border border-gray-500 items-center gap-1 bg-gray-200 text-gray-800 rounded-full px-2.5 py-0.5 text-sm" >
<span class="whitespace-nowrap truncate ">
rockdsadsadsd dsa ssafdd fdssdfsadsa sds sd dsf dfd fds rockdsadsadsd dsa ssafdd fdssdfsadsa sds sd dsf dfd fds
</span>
</label>
</div>
```
&nbsp;
to increase specificity
using `[&&]` or `[&]`
`<div class="m-10 border border-slate-200 [&&]:border-rose-500">Foo`

116
joplin notion extension/Web Development/CSS/Tailwind/Fonts and Colors.md Normal file
View file

@ -0,0 +1,116 @@
Fonts and Colors
https://tailwindcss.com/docs
- Text colors
`text-<color_name>-<strength>`
eg: `text-yellow-500`
highter strength means more darker it is.
- font-size
Syntax : `text-<sizeLabel>`
`text-large`, `text-xl`, `text-6xl`,`text-2xl`
- bold
`font-bold`, `font-semibold`
&nbsp;
**Padding , margin and borders**
- `p-1`, `p-2` , `p-3` , `p-4` with padding equivalent of 0.25rem, 0.5rem, 0.75rem , 1 rem
for padding at vertical means for top,down => `py-4`
for padding at horizontal means for left,right => `px-4`
for at top => `pt-4`. similarly for right, bottom, left => `pr`, `pb`, `pl`.
- for margin, replace `p` with `m`.
- for border,
`border` for border of width 1px , `border-2` => width : 2px
`border-y` : border-top and border-bottom will be there of width 1px
`border-x` : border-left and border-right will be there of width 1px
similarly for individual directions
`border-t-4`, `border-r-4`, `border-b-4` and `border-l-4`
for border style
`border-solid`
for border color
`border-blue-200` , `border-gray-400`
&nbsp;
**Sizing**
- `size-full` => `width: 100%; height: 100%`
`size-fit` => `width: fit-content; height: fit-content`
`size-6/12` => `width: 50%; height: 50%`
&nbsp;
**flex layout**
```html
<div class="flex items-end justify-center">
<div class="bg-red-500 h-4 w-6"></div>
<div class="bg-blue-500 h-8 w-6"></div>
<div class="bg-green-500 h-12 w-6"></div>
</div>
```
&nbsp;
**responsive classes**
- in tailwind.configs.js
```js
module.exports= {
theme : {
screens : {
'sm': '640px',
// => @media (min-width: 640px){...}
'md': '768px',
'lg': '1024px',
'xl': '1280px'
}
}
}
```
in html
`<a href="/" class="text-green-500 sm:text-red-500 lg:text-blue-500">Food Ninja</a>`
So as width keeps increasing color will change from green to red to blue
&nbsp;
**Cards**
```html
<!-- cards go here -->
<div class="bg-white rounded overflow-hidden shadow-md">
<img
class="w-full h-32 sm:h-48 object-cover"
src="img/stew.png"
alt="stew"
/>
<div>
<span class="font-bold">5 Bean Chili Stew</span>
<span class="block text-gray-500 text-sm"
>Recipe by Mario</span
>
</div>
</div>
```
&nbsp;
**Badge**
- badges are small visual indicators or labels that convey information or denote status on cards. They can serve various purposes, such as status indicator, classification,etc
```html
<div
class="relative bg-white rounded overflow-hidden shadow-md"
>
<img
class="w-full h-32 sm:h-48 object-cover"
src="img/stew.png"
alt="stew"
/>
<div>
<span class="font-bold">5 Bean Chili Stew</span>
<span class="block text-gray-500 text-sm"
>Recipe by Mario</span
>
</div>
<div
class="bg-secondary-100 text-secondary-200 text-xs uppercase font-bold rounded-full p-2 absolute top-0 ml-2 mt-2"
>
<span>25 mins</span>
</div>
</div>
```
- make sure that parent ie card has relative(`postition : relative`) class so badge as absolute would work
&nbsp;
**Grids**

88
joplin notion extension/Web Development/CSS/Tailwind/HTML Template.md Normal file
View file

@ -0,0 +1,88 @@
HTML Template
- By linking style.css of tailwind, all the default styles of elements imposed by browser will be gone
```html
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div>
<div>
<nav>
<div>
<h1>
<a href="/">Food Ninja</a>
</h1>
</div>
<ul>
<li>
<a href="#">
<span>Home</span>
</a>
</li>
<li>
<a href="#">
<span>About</span>
</a>
</li>
<li>
<a href="#">
<span>Contact</span>
</a>
</li>
</ul>
</nav>
</div>
<main>
<div>
<a href="#">Log in</a>
<a href="#">Sign up</a>
</div>
<header>
<h2>Recipes</h2>
<h3>For Ninjas</h3>
</header>
<div>
<h4>Latest Recipes</h4>
<div>
<!-- cards go here -->
<div>
<img src="img/stew.jpg" alt="stew" />
<div>
<span>5 Bean Chili Stew</span>
<span>Recipe by Mario</span>
</div>
</div>
</div>
<h4>Most Popular</h4>
<div>
<!-- cards go here -->
</div>
</div>
<div>
<div>Load more</div>
</div>
</main>
</div>
</body>
</html>
```
Without linking tailwind style file
![f83fc6b954ed77d200b5c0670d27ef10.png](../../../../_resources/f83fc6b954ed77d200b5c0670d27ef10.png)
With linking tailwind style file
![3425d014a947b459d58a59d6f1a7b43b.png](../../../../_resources/3425d014a947b459d58a59d6f1a7b43b.png)

43
joplin notion extension/Web Development/CSS/Tailwind/Intro and Setup.md Normal file
View file

@ -0,0 +1,43 @@
Intro and Setup
https://www.youtube.com/playlist?list=PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw
- Css framwork made of utility classes and are much lower level than Bootstrap, Materialize etc for improved flexibility
&nbsp;
**Installation**
- `npm init -y` to create package.json base file and then `npm i tailwindcss postcss autoprefixer` to install these modules locally
&nbsp;
**How it works**
![fccce4208ab8b92759d53376c89689f6.png](../../../../_resources/fccce4208ab8b92759d53376c89689f6.png)
in src all the classes of tailwind and importted and tailwind script compiles it to output public style.css files which is interpretated by browser.
We can also add our styles in src file too but that is not needed often
&nbsp;
### Setup
- Create directory named `src` and `public` and inside `src` add `style.css` and add followiing code
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
- Also do `npx tailwindcss init` and add following in `tailwind.config.js`
```js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./public/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
};
```
If html file is int public folder then it is public/** ... . if its in src then it is src/**..
- In package.json under scripts section add the following script
`"build-css": "tailwindcss build src/styles.css -o public/styles.css"`
- Now run `npm run build-css` to generate style.css at public folder. this public folder may have index.html file too
&nbsp;
- Without npm, in order to use tailwind simply add following cdn link
`<link href= "https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>`
also make sure to install this if there are problems `npm i tailwindcss@3.4.17 --save-dev`