u/TutorialDoctor

I remember when Tailwind first came out. I was very impressed with the idea of utility classes and realized I could make my own version of it. Of course I ended up just using Tailwind because It added a lot of features over time. However, I realized after a while that I don't really use all of the features and mostly use the alignment and spacing utility classes and some of the colors.

For a current project I'm working on, I just made my own utility classes based on Tailwind and it works well.

Anyone else doing this?

/* tiny.css */

:root {
  --0: #fff;
  --50: #fafafa;
  --100: #f4f4f5;
  --200: #e4e4e7;
  --300: #d4d4d8;
  --400: #a1a1aa;
  --500: #71717a;
  --600: #52525b;
  --700: #3f3f46;
  --800: #27272a;
  --900: #18181b;
  --950: #09090b;

  --r: .5rem;
  --shadow: 0 1px 3px #0001, 0 1px 2px #0001;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

ul {
  list-style-type: none;
}

html {
  font: 16px/1.5 system-ui, sans-serif;
  color: var(--900);
  background: var(--50);
}

body {
  margin: 0;
  min-height: 100vh;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
}

a {
  color: var(--900);
  text-decoration: none;
}

a:hover {
  color: var(--600);
}

button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .5rem .875rem;
  border: 1px solid var(--900);
  border-radius: var(--r);
  background: var(--900);
  color: var(--0);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}

button:hover,
.btn:hover {
  background: var(--800);
}

.btn-light {
  background: var(--0);
  color: var(--900);
  border-color: var(--300);
}

.btn-light:hover {
  background: var(--100);
}

.btn-ghost {
  background: transparent;
  color: var(--700);
  border-color: transparent;
}

.btn-ghost:hover {
  background: var(--100);
  color: var(--900);
}

input,
textarea,
select {
  width: 100%;
  padding: .5rem .75rem;
  border: 1px solid var(--300);
  border-radius: var(--r);
  background: var(--0);
  color: var(--900);
  outline: 0;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--900);
  box-shadow: 0 0 0 3px #18181b18;
}

textarea {
  min-height: 8rem;
  resize: vertical;
}

h1,h2,h3,h4,h5,h6 {
  margin: 0 0 1rem;
  line-height: 1.2;
  color: var(--950);
}

/* h1 { font-size: 2.25rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; } */

.text-xs { font-size: .75rem; line-height: 1rem; }
.text-sm { font-size: .875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1; }


p {
  margin: 0 0 1rem;
  color: var(--700);
}

hr {
  border: 0;
  border-top: 1px solid var(--200);
  margin: 2rem 0;
}

code {
  padding: .125rem .375rem;
  border: 1px solid var(--200);
  border-radius: .25rem;
  background: var(--100);
  font-size: .875em;
}

pre {
  padding: 1rem;
  overflow-x: auto;
  border-radius: var(--r);
  background: var(--950);
  color: var(--100);
}

blockquote {
  margin: 1.5rem 0;
  padding: .75rem 1rem;
  border-left: 3px solid var(--300);
  background: var(--100);
  color: var(--600);
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--0);
}

th,
td {
  padding: .75rem;
  text-align: left;
  border-bottom: 1px solid var(--200);
}

th {
  color: var(--600);
  font-size: .875rem;
}

.container {
  width: min(100% - 2rem, 1200px);
  margin-inline: auto;
}

img{
    width: 32px;
    height: 32px
}
/* layout */

.flex { display: flex; }
.grid { display: grid; }
.block { display: block; }
.hidden { display: none; }

.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }

.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }

.flex-wrap { flex-wrap: wrap; }

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Display Grid */
.grid {
  display: grid;
}

/* Grid Columns 1-12 */
.grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5  { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-7  { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.grid-cols-8  { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.grid-cols-9  { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

/* Standard Gap Sizes (Optional) */
.gap-0 { gap: 0rem; }
.gap-1 { gap: .25rem; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
/* spacing */

.m-0 { margin: 0; }
.mt-2 { margin-top: .5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mx-auto { margin-inline: auto; }

.p-0 { padding: 0rem; }
.p-1 { padding: .25rem; }
.p-2 { padding: .5rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.p-10 { padding: 2.5rem; }
.p-12 { padding: 3rem; }

.px-4 {
  padding-inline: 1rem;
}

.py-2 {
  padding-block: .5rem;
}

.py-4 {
  padding-block: 1rem;
}

/* sizing */

.w-full { width: 100%; }
.h-full { height: 100%; }

.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }

/* surfaces */

.card {
  padding: 1.5rem;
  background: var(--0);
  border: 1px solid var(--200);
  border-radius: .75rem;
  box-shadow: var(--shadow);
}

.border {
  border: 1px solid var(--200);
}

.rounded {
  border-radius: var(--r);
}

.rounded-lg {
  border-radius: .75rem;
}

.rounded-full {
  border-radius: 999px;
}

/* colors */

.bg-white { background: var(--0); }
.bg-gray-50 { background: var(--50); }
.bg-gray-100 { background: var(--100); }
.bg-gray-900 { background: var(--900); }

.text-white { color: var(--0); }
.text-gray-500 { color: var(--500); }
.text-gray-600 { color: var(--600); }
.text-gray-700 { color: var(--700); }
.text-gray-900 { color: var(--900); }

.text-sm { font-size: .875rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }

.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.shadow { box-shadow: var(--shadow); }

@media (max-width: 640px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .container {
    width: min(100% - 1rem, 1200px);
  }

  h1 { font-size: 1.875rem; }
  h2 { font-size: 1.5rem; }
}

from flask import Response

@app.route("/routes", methods=["GET"])
def all_routes():
    route_text = ""
    for rule in app.url_map.iter_rules():
        methods = ",".join(sorted(rule.methods - {"HEAD", "OPTIONS"}))
        route_text += f"{rule.endpoint:<20} {methods:<15} {rule.rule}\n"
    return Response(route_text, mimetype="text/plain")

Anyone else do this? Is there a better way?

As far as I know plugins shouldn't be autoupdating but I guess one way or another several plugins have updated (I didn't check for updates either)and the updates break my vault, it really makes me want to steer far away from them or either just create my own for what I need.

I’ve been using the Pythonista IDE by Ole Zorn for over 10 years and I’m just amazed at how consistently good it is. It doesn’t have the latest greatest features but I still use it almost daily. Works with IOS Shortcuts as well. This would be a good one to add to the Wiki.

I was gifted an Apple keyboard case recently and it totally gives new life to Obsidian on mobile. I didn’t realize how much impact something like that would have (I hesitated greatly because of the price and even looked at alternatives), but now that I have it I’ve been using Obsidian a lot more on mobile.

Some things that are good:

1. I can actually resize split windows now that I have a cursor
2. Using Obsidian with a keyboard case in general is more pleasant (no more poking at the screen)
3. More precise pointing and selection with the cursor.
4. You can now use the keyboard hotkey shortcuts on mobile for fast actions.

Some things that aren’t so good:

1. I tend to keep my iPad in the case more often and forget I can just take it off at times. When I take it off, Obsidian doesn’t feel as useful on mobile again.
2. You’ll wonder how you ever used Obsidian on mobile without a keyboard.
3. The apple keyboard case itself is a little top heavy and leans backwards if not adjusted forward, although when adjusted forward it covers the top row (so that’s not accessible then).
4. The iPad’s magnets aren’t on both sides of the device so it only mounts one direction on the case (iPad usb facing right and case usb port facing left).

Hello there! I'm a software developer by trade and I've used a number of frameworks and languages to build apps. I started out years ago with python to build small utility scripts. For years there wasn't really a "modern" way to build GUI's for python. I think python itself really can boost productivity so it tends to be my favorite language for building tools.

This is why I started using Flet a year or more ago to build personalized productivity apps.

However, I really liked building with VueJS and TailwindCSS and needed more custom UI's so I took a break to learn how to use Tauri to build native desktop apps. You can check out a free Tauri Starter Template I made on GitHub.

But on the other hand, most of the modern AI libraries are written in python, and I found it difficult to set up sidecars with Tauri, so I am going back to Flet for AI related productivity apps. I'm currently building a local-first Higgsfield-like / Seedance-like image/video generator.

In summary, both of these frameworks are amazing for building personalized desktop utility apps.

Also, I like this subreddit 😄

I'm trying to make the best open source tauri app template. I have built a lot of applications but I always end up starting from scratch. I've had the architecture in my mind for this for a long time but Rust was my nemesis (used AI to write all of the rust stuff and even help me get unblocked on how to use it on the frontend).

This repo uses just about all of the core Tauri plugins in a somewhat general-purpose application. Code is little messy as I hack this together but I know this is going to speed up development time. Hope it's helpful to someone.

https://github.com/TutorialDoctor/tauri-app-shell