sandbox: /sandbox/tailwind-stuff Cheatsheet: https://www.creative-tim.com/twcomponents/cheatsheet
Installing Tailwind
bun add -D tailwindcss postcss autoprefixer
Then, to create the configuration files etc:
bunx tailwindcss init -p
It is important that tailwind is imported in your CSS:
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';Tailwind configuration
For more details, see Tailwind Configuration.
CSS Basics
Selectors
Display
inline: only take the necessary space
block: take the entire space available
Flex vs. Grid
Components
Navbar: https://github.com/RSurya99/nefa/blob/main/components/base/Navbar.vue
Layout
class="flex"
// oben fest:
class="fixed top-0"
// gesamte height des screens:
class="h-screen"
// weite von 16 tailwind spacing units
class="w-16"
Typography
// sorgt dafür dass automatisch alle wörter den container füllen
class="break-all"
Spacing
Padding
// padding 0 px:
p-0
// padding left + right, over the x axis of 0 px
px-0
// padding top + bottom, over the y axis of 0 px
py-0
// top, right, bottom or left
pt, pr, pb, plFixed values:
p-1Margin
For the margin, same as for padding. m, ml, mx, my and so on.
Negative margins can be used: -mt-10
Space between
Normally, one would use margin or padding between spaced elements.
Tailwind has classes for doing so.
space-y-8
space-x-4Automatically provides the given spacing values on the chosen axes for all child elements.
Width and height
Percentage width
Fixed height:
// height 100vh:
h-screenbased on flex:
w-1/2
h-1/2Both taking the half of the space available.
Example:
<div className="w-1/4">Sidebar</div>
<div className="w-3/4">Main</div>Should be wrapped in flex w-full
Colors
background color
bg-transparent
bg-current
bg-black
bg-green-300
Text
Text size
text-xs: Extra Smalltext-sm: Smalltext-base: Base (default)text-lg: Largetext-xl: Extra Large
Font weight
font-thin: Thinfont-normal: Normal (default)font-semibold: Semi-Boldfont-bold: Boldfont-extrabold: Extra-Bold