forked from tangled.org/site
engineering blog at https://blog.tangled.sh

setup tailwind

anirudh.fi 748e71db 48393f37

verified
+1
.gitignore
··· 1 1 .direnv/ 2 2 build/ 3 + static/tw.css
+2
config.yaml
··· 1 + preBuild: 2 + - tailwindcss -i input.css -o static/tw.css 1 3 title: tangled.sh engineering blog 2 4 # note the trailing slash! 3 5 url: "https://tangled.sh"
+1 -1
flake.nix
··· 33 33 pkgs.gotools 34 34 pkgs.gnumake 35 35 pkgs.entr 36 - pkgs.awscli2 36 + pkgs.tailwindcss 37 37 ]; 38 38 }; 39 39 }
+156
input.css
··· 1 + @tailwind base; 2 + @tailwind components; 3 + @tailwind utilities; 4 + @layer base { 5 + @font-face { 6 + font-family: "iA Writer Quattro S"; 7 + src: url("/static/fonts/iAWriterQuattroS-Regular.ttf") 8 + format("truetype"); 9 + font-weight: normal; 10 + font-style: normal; 11 + font-display: swap; 12 + font-feature-settings: 13 + "calt" 1, 14 + "kern" 1; 15 + } 16 + @font-face { 17 + font-family: "iA Writer Quattro S"; 18 + src: url("/static/fonts/iAWriterQuattroS-Bold.ttf") format("truetype"); 19 + font-weight: bold; 20 + font-style: normal; 21 + font-display: swap; 22 + font-feature-settings: 23 + "calt" 1, 24 + "kern" 1; 25 + } 26 + @font-face { 27 + font-family: "iA Writer Quattro S"; 28 + src: url("/static/fonts/iAWriterQuattroS-Italic.ttf") format("truetype"); 29 + font-weight: normal; 30 + font-style: italic; 31 + font-display: swap; 32 + font-feature-settings: 33 + "calt" 1, 34 + "kern" 1; 35 + } 36 + @font-face { 37 + font-family: "iA Writer Quattro S"; 38 + src: url("/static/fonts/iAWriterQuattroS-BoldItalic.ttf") 39 + format("truetype"); 40 + font-weight: bold; 41 + font-style: italic; 42 + font-display: swap; 43 + font-feature-settings: 44 + "calt" 1, 45 + "kern" 1; 46 + } 47 + 48 + @font-face { 49 + font-family: "iA Writer Mono S"; 50 + src: url("/static/fonts/iAWriterMonoS-Regular.ttf") format("truetype"); 51 + font-weight: normal; 52 + font-style: normal; 53 + font-display: swap; 54 + font-feature-settings: 55 + "calt" 1, 56 + "kern" 1; 57 + } 58 + @font-face { 59 + font-family: "iA Writer Mono S"; 60 + src: url("/static/fonts/iAWriterMonoS-Bold.ttf") format("truetype"); 61 + font-weight: bold; 62 + font-style: normal; 63 + font-display: swap; 64 + font-feature-settings: 65 + "calt" 1, 66 + "kern" 1; 67 + } 68 + @font-face { 69 + font-family: "iA Writer Mono S"; 70 + src: url("/static/fonts/iAWriterMonoS-Italic.ttf") format("truetype"); 71 + font-weight: normal; 72 + font-style: italic; 73 + font-display: swap; 74 + font-feature-settings: 75 + "calt" 1, 76 + "kern" 1; 77 + } 78 + @font-face { 79 + font-family: "iA Writer Mono S"; 80 + src: url("/static/fonts/iAWriterMonoS-BoldItalic.ttf") 81 + format("truetype"); 82 + font-weight: bold; 83 + font-style: italic; 84 + font-display: swap; 85 + font-feature-settings: 86 + "calt" 1, 87 + "kern" 1; 88 + } 89 + 90 + @font-face { 91 + font-family: "Inter"; 92 + font-style: normal; 93 + font-weight: 400; 94 + font-display: swap; 95 + font-feature-settings: 96 + "calt" 1, 97 + "kern" 1; 98 + } 99 + h1 { 100 + @apply text-2xl; 101 + @apply font-sans; 102 + @apply text-black; 103 + @apply py-4; 104 + } 105 + 106 + ::selection { 107 + @apply bg-yellow-400; 108 + @apply text-black; 109 + @apply bg-opacity-30; 110 + } 111 + 112 + html { 113 + letter-spacing: -0.01em; 114 + word-spacing: -0.07em; 115 + } 116 + 117 + @layer base { 118 + a { 119 + @apply no-underline text-black hover:underline hover:text-gray-800; 120 + } 121 + 122 + label { 123 + @apply block text-sm text-black; 124 + } 125 + input { 126 + @apply bg-white border border-black rounded-sm focus:ring-black p-2; 127 + } 128 + textarea { 129 + @apply bg-white border border-black rounded-sm focus:ring-black p-2; 130 + } 131 + } 132 + 133 + @layer components { 134 + .btn { 135 + @apply relative z-10 inline-flex min-h-[30px] cursor-pointer items-center 136 + justify-center bg-transparent px-2 pb-[0.2rem] text-base 137 + text-gray-900 before:absolute before:inset-0 before:-z-10 138 + before:block before:rounded-sm before:border before:border-gray-200 139 + before:bg-white before:drop-shadow-sm 140 + before:content-[''] hover:before:border-gray-300 141 + hover:before:bg-gray-50 142 + hover:before:shadow-[0_2px_2px_0_rgba(20,20,96,0.1),inset_0_-2px_0_0_#f5f5f5] 143 + focus:outline-none focus-visible:before:outline 144 + focus-visible:before:outline-4 focus-visible:before:outline-gray-500 145 + active:before:shadow-[inset_0_2px_2px_0_rgba(20,20,96,0.1)]; 146 + } 147 + } 148 + @layer utilities { 149 + .error { 150 + @apply py-1 text-red-400; 151 + } 152 + .success { 153 + @apply py-1 text-black; 154 + } 155 + } 156 + }
+23
tailwind.config.js
··· 1 + /** @type {import('tailwindcss').Config} */ 2 + module.exports = { 3 + content: ["./appview/pages/templates/**/*.html"], 4 + theme: { 5 + container: { 6 + padding: "2rem", 7 + center: true, 8 + screens: { 9 + sm: "540px", 10 + md: "650px", 11 + lg: "900px", 12 + xl: "1100px", 13 + "2xl": "1300x", 14 + }, 15 + }, 16 + extend: { 17 + fontFamily: { 18 + sans: ["iA Writer Quattro S", "Inter", "system-ui", "sans-serif", "ui-sans-serif"], 19 + mono: ["iA Writer Mono S", "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"], 20 + }, 21 + }, 22 + }, 23 + };