Tailwind Font Weights in Svelte/SvelteKit Project

tailwind-font-weights.md

Tailwind Font Weights in Svelte/SvelteKit Project

Run the following command in your SvelteKit project root

The Command Explained

The command you've provided is a Bash loop that operates over a predefined list of font weight names. It performs a series of commands for each font weight name in the list. Let's break it down step by step to understand what it does:

1. for n in thin extralight light normal medium semibold bold extrabold black; do ... done: This is a for loop in Bash. It iterates over a list of font weight names (thin, extralight, light, normal, medium, semibold, bold, extrabold, black). For each iteration, the variable $n takes on the value of the current font weight name from the list.

2. echo "$n: " | tr -d '\n': Inside the loop, this command prints the name of the current font weight ($n), followed by a colon and a space, to the standard output. The echo command by default adds a newline at the end, but | tr -d '\n' removes this newline, so the output stays on the same line.

3. find ./src/ -type f | xargs grep font-$n: This command searches within the ./src/ directory for files (-type f) and then uses xargs to pass the found file paths as arguments to grep. grep searches these files for the string font-$n, where $n is replaced by the current font weight name in the iteration. The use of grep here is to find and list occurrences of the specific font weight within the files of the src directory.

4. wc -l: The output of the grep command (the lines containing the search term) is then piped into wc -l, which counts the number of lines received. This count represents the number of occurrences found for the specific font weight name in the files under ./src/.

Putting it all together, the entire loop prints the name of each font weight followed immediately by the number of occurrences of that font weight (prefixed with font-) in the files located under the ./src/ directory. This is useful for auditing or analyzing the usage of different font weights across a project's source code.

for n in thin extralight light normal medium semibold bold extrabold black; 
  do echo "$n: " | tr -d '\n' && find ./src/ -type f | xargs grep font-$n | wc -l; 
done

which prints

thin: 0
extralight: 0
light: 10
normal: 15
medium: 8
semibold: 14
bold: 95
extrabold: 0
black: 0

Have fun optimising 🚀