initial
This commit is contained in:
nm1
commit
74ae93a96e
1 changed files with 94691 additions and 0 deletions
195
joplin notion extension/Web Development/CSS/Tailwind/Extras.md
Normal file
195
joplin notion extension/Web Development/CSS/Tailwind/Extras.md
Normal 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>
|
||||
```
|
||||
|
||||
|
||||
- **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'
|
||||
|
||||
- **@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>
|
||||
```
|
||||
|
||||
|
||||
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)
|
||||
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
|
||||
to increase specificity
|
||||
using `[&&]` or `[&]`
|
||||
`<div class="m-10 border border-slate-200 [&&]:border-rose-500">Foo`
|
||||
Loading…
Reference in a new issue