Meta tags:
description= Documentation for the Tailwind CSS framework.;
Headings (most frequently used words):
build, modern, html, component, rochelle, one, css, customization, rapidly, websites, without, ever, leaving, your, best, practices, don, actually, work, testimonials, constraint, based, anything, performance, mobile, first, state, variants, projects, driven, prognosis, negative, death, blow, weekly, on, dark, mode, scaling, at, heroku, with, utility, classes, features, editor, tools, ready, made, components, getting, started, core, concepts, community, not, into, frameworks, styles, index, typography, colors, problems,
Text of the page (most frequently used words):
class (139), div (125), the (100), text (96), css (94), and (93), tailwind (93), slate (78), flex (54), developer (48), stroke (45), you (39), rounded (38), button (38), for (37), with (35), center (34), dark (33), font (31), width (30), svg (29), 500 (29), start (28), white (28), full (27), tailwindcss (27), design (26), grid (24), using (23), items (23), col (23), border (22), 900 (22), like (22), round (22), more (21), ring (21), build (20), currentcolor (20), row (20), peer (20), span (19), justify (19), aria (19), label (19), project (19), hover (18), use (18), path (18), fill (18), 400 (18), type (18), focus (17), but (17), height (17), any (17), end (17), only (17), first (16), none (16), space (16), checked (16), was (16), utility (15), shadow (15), that (15), new (15), all (14), your (14), semibold (14), hidden (14), time (14), projects (14), web (14), from (13), alt (13), src (13), img (13), has (13), 100 (13), framework (13), front (13), now (13), learn (12), 700 (12), blue (12), lazy (12), loading (12), into (12), stack (12), never (12), block (11), medium (11), 200 (11), our (11), system (11), can (11), linejoin (11), linecap (11), when (11), html (11), just (11), jpg (10), cols (10), make (10), leading (10), websites (10), again (10), been (10), want (9), same (9), auto (9), size (9), classes (9), cyan (9), navitem (9), year (9), group (9), easy (9), work (9), back (9), engineer (9), until (9), way (9), styles (8), other (8), started (8), out (8), href (8), gap (8), name (8), radio (8), 733 (8), title (8), this (8), head (8), than (8), without (8), why (8), ever (8), colors (7), custom (7), mode (7), even (7), 300 (7), about (7), one (7), btn (7), not (7), have (7), true (7), are (7), going (7), development (7), used (7), how (7), configuration (6), responsive (6), components (6), made (6), 600 (6), between (6), within (6), scale (6), apply (6), list (6), component (6), rating (6), over (6), input (6), house (6), building (6), makes (6), every (6), feel (6), having (6), better (6), getting (5), what (5), relative (5), mountains (5), modern (5), lorem (5), ipsum (5), dolor (5), sit (5), amet (5), consectetur (5), adipiscing (5), elit (5), augue (5), gravida (5), cras (5), quis (5), duis (5), pretium (5), ullamcorper (5), consequat (5), then (5), everything (5), color (5), 861 (5), top (5), they (5), their (5), nav (5), single (5), users (5), category (5), beach (5), designs (5), value (5), completely (5), anything (5), try (5), cto (5), really (5), writing (5), developers (5), dev (5), after (5), designer (5), real (5), thought (5), would (5), customizing (4), states (4), production (4), editor (4), got (4), faster (4), truncate (4), get (4), code (4), 800 (4), secondary (4), primary (4), body (4), sample (4), integer (4), pellentesque (4), simple (4), box (4), 889 (4), absolute (4), don (4), works (4), movie (4), listitem (4), movies (4), import (4), user (4), form (4), evenodd (4), rule (4), looking (4), such (4), indigo (4), object (4), cover (4), instead (4), because (4), consistent (4), else (4), changed (4), being (4), while (4), still (4), founder (4), docs (4), once (4), its (4), actually (4), need (4), gives (4), team (4), quickly (4), software (4), socks (4), think (4), super (4), last (4), write (4), sarah (4), dayan (4), months (4), spacing (3), theme (3), content (3), reusing (3), support (3), ready (3), m18 (3), outline (3), com (3), these (3), names (3), features (3), sans (3), inter (3), prefix (3), typography (3), elegant (3), own (3), shadows (3), change (3), 128 (3), inset (3), 862 (3), 501 (3), m10 (3), add (3), index (3), andrew (3), location (3), 2020 (3), frameworks (3), picks (3), cast (3), runtime (3), genre (3), star (3), react (3), them (3), changes (3), place (3), api (3), 103 (3), normal (3), entire (3), black (3), complex (3), which (3), could (3), most (3), client (3), tiny (3), classic (3), different (3), look (3), fast (3), making (3), teams (3), game (3), changer (3), dan (3), large (3), old (3), ryan (3), working (3), much (3), documentation (3), able (3), long (3), wall (3), didn (3), big (3), looked (3), since (3), thanks (3), times (3), keep (3), okay (3), good (3), products (3), some (3), company (3), there (3), love (3), amazing (3), years (3), frontend (3), implement (3), staff (3), algolia (3), github (2), community (2), customization (2), handling (2), fundamentals (2), core (2), optimizing (2), setup (2), installation (2), fully (2), developed (2), hundreds (2), help (2), find (2), perfect (2), point (2), move (2), cssconflict (2), applies (2), property (2), problems (2), 002 (2), 997 (2), http (2), org (2), ease (2), 256 (2), fit (2), https (2), worried (2), integration (2), tools (2), rows (2), transforms (2), template (2), gradients (2), state (2), visible (2), greatest (2), experience (2), enjoyable (2), serif (2), display (2), range (2), brutalist (2), playful (2), config (2), file (2), set (2), literally (2), palette (2), scaling (2), heroku (2), 6v12 (2), m14 (2), next (2), 5v3 (2), 111c0 (2), 491 (2), 398 (2), 363 (2), 734 (2), 166 (2), skip (2), seconds (2), evenly (2), rect (2), 362 (2), 096 (2), 865 (2), left (2), abbr (2), those (2), throw (2), active (2), footer (2), accept (2), decline (2), description (2), 00am (2), nov (2), extract (2), vincent (2), rated (2), releases (2), divide (2), john (2), clarke (2), rochelle (2), zach (2), 2021 (2), truth (2), section (2), 5a1 (2), 1v3h3a1 (2), 3v3a1 (2), 3h6a1 (2), 2h3v6a1 (2), header (2), filter (2), placeholder (2), clip (2), success (2), style (2), something (2), main (2), two (2), close (2), self (2), collingwood (2), 655 (2), interior (2), 2xl (2), max (2), accessible (2), workcation (2), watch (2), sucks (2), right (2), initial (2), meta (2), removes (2), unused (2), ship (2), performance (2), free (2), shipping (2), 172 (2), 656 (2), buy (2), jacket (2), site (2), twice (2), sizing (2), seriously (2), constraints (2), well (2), constraint (2), based (2), give (2), come (2), david (2), will (2), career (2), provides (2), bespoke (2), website (2), around (2), helps (2), process (2), efficient (2), campbell (2), turns (2), abstraction (2), letting (2), hard (2), initially (2), number (2), however (2), hooked (2), workflow (2), senior (2), implementing (2), rapid (2), systems (2), great (2), also (2), improved (2), skills (2), needed (2), digital (2), skeptical (2), feels (2), wrong (2), before (2), banging (2), against (2), sense (2), spaghetti (2), wondering (2), sites (2), future (2), jan (2), convert (2), styling (2), itself (2), devops (2), already (2), bootstrap (2), always (2), part (2), bad (2), confidence (2), clicked (2), another (2), productivity (2), wordpress (2), tech (2), educator (2), lot (2), biggest (2), aaron (2), pair (2), put (2), matter (2), productive (2), joy (2), programmer (2), yet (2), may (2), gave (2), regular (2), very (2), spend (2), javascript (2), pure (2), allows (2), many (2), create (2), traditional (2), wonder (2), complete (2), realize (2), might (2), semantic (2), life (2), easier (2), quicker (2), maintain (2), worry (2), kumar (2), skeptic (2), best (2), past (2), luke (2), worked (2), ass (2), instantly (2), had (2), hype (2), few (2), idiot (2), adapts (2), customize (2), seen (2), figure (2), figcaption (2), blockquote (2), search (2), rapidly (2), leaving (2), youtube, twitter, discord, presets, plugins, screens, functions, directives, adding, concepts, upgrade, guide, browser, preprocessors, collection, beautiful, designed, creators, examples, choose, guaranteed, starting, email, 118l, 4v14a2, 2h12a2, 2v8, 118z, 003, 884l10, 882l7, 998a2, 0016, 4h4a2, 884z, viewbox, www, 2000, xmlns, inline, transparent, transition, duration, 150, facepad, facearea, format, ixid, eyjhchbfawqiojeymdd9, images, unsplash, photo, 1494790108377, be9c29b29330, ixlib, shrink, regional, paradigm, technician, admin, teal, jane, cooper, intelligent, autocomplete, suggestions, linting, definitions, required, remembering, intellisense, extension, covered, world, ide, flow, filters, columns, composable, powered, variables, selectors, tons, unapologetically, takes, advantage, latest, possible, cutting, edge, comfort, zone, module, 0f172a, 1e293b, 334155, 475569, 64748b, 94a3b8, cbd5e1, e2e8f0, f1f5f9, f8fafc, 1e3a8a, 1e40af, 1d4ed8, 2563eb, 3b82f6, 60a5fa, 93c5fd, bfdbfe, dbeafe, eff6ff, fontfamily, exports, 14pt, aabbcc, craft, let, transform, includes, expertly, crafted, defaults, customized, mouse, cursor, extend, tweak, 6v12l8, m19, 889h15, m17, 509, 95c, 365, 711, 759, 991, 176, pause, 889h9, 492, 95c2, 0a7, 226, rewind, 6v12l, previous, 931c7, 853, 905, 5h6, 19c16, 147, 931v19l, 4v6, 931z, favorites, tabular, nums, 4550, valuemax, valuemin, 1456, valuenow, music, progress, progressbar, role, overflow, episode, min, png, disable, blinds, people, open, phone, 2am, enable, background, article, sky, base, mcdonald, attendees, meeting, kitchener, est, thu, date, weekly, directive, repeated, patterns, copying, pasting, key, map, isactive, classname, return, function, default, export, idris, elba, cena, thandiwe, newton, action, 18a, death, blow, emilia, 56m, romance, simon, pegg, galifianakis, 46m, comedy, prognosis, negative, blade, angular, vue, repeating, utilities, partial, boom, source, duplication, driven, dashed, solid, avatar, url, appearance, 4a4, 000, 8zm2, 8a6, 1110, 476l4, 817, 817a1, 414, 414l, 816, 816a6, 012, pointer, events, customer, onboarding, emails, human, resources, benefits, plan, engineering, stick, beginning, fancy, invented, ourselves, disabled, variants, sunny, spacious, room, traveling, light, comfy, cosy, lay, night, sits, vibrant, neighborhood, littered, cafes, pubs, restaurants, supermarkets, major, attractions, edinburgh, castle, arthur, seat, check, availability, ontario, 11a2, 034c18, 897, 19s, 966c6, 819, 5s6, 034z, circle, m12, 5h5l, 5l12, 16l, 3l9, 14l, 4h5l2, current, reviews, via, gradient, reverse, 5xl, 4xl, headless, unstyled, trip, suits, official, screen, magically, specific, breakpoint, wrestling, bunch, media, queries, lets, mobile, npx, output, terminal, stylesheet, rel, link, document, device, viewport, utf, charset, lang, doctype, package, json, automatically, means, final, bundle, smallest, possibly, fact, less, 10kb, continental, orders, 172a4, 015, 0l10, 343l1, 171a4, 115, 656l10, 657l, 828, 829a4, 010, 656z, bag, submit, baseline, stock, 110, wrap, low, level, encourages, whatever, littering, stylesheets, arbitrary, values, choices, engineered, show, jacob, graf, convinced, said, quartix, paluy, unlocked, cheat, jason, beggs, freelance, allowing, australian, michael, dyrynda, flexibility, infinitely, customizable, shoehorned, cut, cloth, jeff, sagal, ecosystem, giant, turbocharger, agencies, designers, develop, shared, language, speeds, teamwork, trevor, bothered, vanilla, waste, bother, learned, ton, anyway, middleground, thoughtful, break, subscriptionbox, brooking, pushed, mention, due, minutes, annoying, guy, pushing, anyone, who, listen, simplified, beyond, measurement, crateandbarrel, gayle, doesn, hopping, tesla, dad, rusted, minnesota, farm, truck, sure, clutch, slipping, brakes, barely, filled, tires, anymore, chenkie, isn, yell, take, deep, breath, run, npm, install, featureboard, corey, ginnivan, bridges, reintroduces, context, limits, cognitive, load, choice, architecture, grants, access, token, library, incredibly, pickup, helped, jess, archer, instinctively, hated, converted, reignited, excitement, operations, lead, bettercloud, ian, gaenssley, accelerant, prototyping, strong, helpful, instant, results, josh, manders, overall, wonderful, handwrite, joshua, lowe, wondered, application, prototype, hellmann, resisted, doing, slow, marc, köhlbrugge, trying, earlier, hurts, hole, least, pleasant, brown, agency, deal, unique, each, nightmare, favor, hollander, tried, keeps, glenn, meyer, felt, confident, designing, apps, knickerbocker, magic, documented, pleasure, network, administrator, sergio, peris, know, giving, decided, switch, mawla_io, malone, hardest, offering, service, port, call, igor, randjelovic, almost, immediately, picture, myself, bem, happy, public, release, high, member, laravelphp, nuno, maduro, greg, sullivan, offer, clients, turnaround, themes, both, builds, revisions, maker, pieter, levels, shruti, balasa, discovered, learnt, creating, pages, kent, dodds, brent, garner, solves, problem, compromising, enabling, imaginable, sanjay, soundarajan, handedly, impactful, glad, live, universe, where, exists, francis, søren, kottal, unified, across, methodology, stability, neil, docherty, nice, president, agilitycms, joel, varty, revolutionized, pipeline, cli, consistently, zac, jordan, zajdel, seems, step, backward, absolutely, nothing, comes, during, phase, braunson, yager, drastically, primitive, jerred, hurst, took, discussion, implemented, wide, breeze, jump, enhancements, matthias, schmidt, burned, abandoned, fear, bet, disappear, couldn, happier, improving, meaningful, ways, basis, alive, hugh, durkin, tachyons, steroids, lance, armstrong, winning, tour, france, seven, course, scandal, shame, matija, marohnić, eject, complexity, abstracting, away, powerful, gets, obvious, matt, swanson, chore, fall, unplatform, avivasolutions, joost, meijles, wasn, comfortable, met, combined, excellent, marco, singhof, slowly, migrate, feature, benefiting, upfront, kahlil, lechelt, implementation, configurable, powers, clean, integrates, genius, charlie, joseph, seem, amaze, updates, aided, boring, ivan, guzman, ability, cup, coffee, chase, giunta, alleviated, become, accustomed, christopher, pitt, easiest, simplest, imagine, boris, lepikhin, turned, beyondcode, marcel, pociot, enjoy, madeline, came, job, days, personal, trey, piepmeier, bridging, becoming, defacto, styptapp, didier, catz, tool, ben, furfie, 2017, wrote, frequently, coincidence, released, mistake, program, manager, microsoft, debbie, brien, ten, etc, jake, smith, total, jilson, thomas, bring, mental, exercise, understanding, hierarchy, behind, christian, holman, amount, skipping, conversion, brainwaves, speed, fullstack, blissful, launchpathinc, mannie, schumpert, nearing, completion, rewriting, typescript, wow, rocks, sumit, admit, million, abstract, properties, uis, awesome, stuff, found, hadn, done, early, nineties, mean, ends, empowering, crazy, impressive, kelvin, omereshone, mind, rotimi, began, copy, sveltejs, breaking, evan, payne, remember, horrified, saw, increasing, joyful, things, sam, carré, rather, constraining, standardization, exactly, bennett, example, preconceptions, aside, evaluating, streets, ahead, believed, school, thinking, nick, saraev, scalable, eric, barnes, kicked, later, saving, knew, together, dennis, walsh, trajectory, business, performing, vasu, bansal, annoyances, multiple, praveen, gilliland, unpleasant, jon, bloomer, spent, day, poc, wish, considering, rebuild, ruby, ios, redpath, finally, weeks, hand, jad, limcaco, ken, wheeler, trendyminds, bushnell, officially, train, ridiculously, flexible, graeme, houston, thing, handful, pain, gilbert, rabut, tsurwa, loved, moment, dacey, nolan, fell, modifiers, thorough, palettes, former, wwe, champion, bret, hitman, hart, planet, codesandbox, sara, vieira, wanted, vercel, guillermo, rauch, recommend, programming, today, remix, training, florence, testimonials, creator, adam, wathan, written, reason, believe, suppress, urge, retch, enough, chance, thousand, words, practices, 512, 384, quick, packed, composed, directly, markup, rotate, showcase, blog, navigation, wayback, machine, archive, 20221207185509, timestamps, capture, fail, 2023, 2022, dec,
Text of the page (random words):
eep breath then i run npm install tailwindcss ryan chenkie going back to a large website that doesn t use tailwind is like hopping out of a tesla and into my dad s rusted minnesota farm truck sure it works but the clutch is slipping the brakes barely work and it s filled with old tires we re not even using anymore dan gayle senior front end developer crateandbarrel i pushed back hard at the mention of tailwind initially due to the number of classes in my code however within 5 minutes or using it i was hooked and now am the annoying guy pushing tailwind on anyone who will listen it has simplified my dev workflow beyond measurement dan brooking head engineer subscriptionbox i never bothered to learn vanilla css because it s a waste of time why bother when i have tailwind instead turns out i learned a ton of css anyway just by using tailwind it s such a perfect middleground between thoughtful abstraction while still letting you break free trevor campbell tailwind and the ecosystem around it is like a giant turbocharger for web agencies it helps teams of developers and designers develop a shared language and system of constraints that speeds up the entire process it s a game changer for efficient teamwork jeff sagal full stack developer tailwind provides the style of bespoke design the constraint of a design system and the flexibility to make it infinitely customizable without being shoehorned into making every website look like it was cut from the same cloth michael dyrynda australian tailwind completely changed my freelance career by allowing me to build out completely custom designs really fast without writing any css jason beggs front end developer using tailwindcss will make you feel like you just unlocked a cheat code david paluy cto quartix every developer i ve convinced to give tailwind a try has come back and said they are never going back every single one jacob graf web developer show more constraint based an api for your design system utility classes help you work within the constraints of a system instead of littering your stylesheets with arbitrary values they make it easy to be consistent with color choices spacing typography shadows and everything else that makes up a well engineered design system learn more utility first fundamentals sizing colors typography shadows w 96 w 80 w 72 w 64 w 60 w 56 w 52 w 48 w 64 w 60 w 56 w 52 w 48 w 44 w 40 w 36 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 div class space y 4 div class w 96 bg white shadow rounded w 96 div div class w 80 bg white shadow rounded w 80 div div class w 72 bg white shadow rounded w 72 div div class w 64 bg white shadow rounded w 64 div div class w 60 bg white shadow rounded w 60 div div class w 56 bg white shadow rounded w 56 div div class w 52 bg white shadow rounded w 52 div div class w 48 bg white shadow rounded w 48 div div build anything build whatever you want seriously because tailwind is so low level it never encourages you to design the same site twice even with the same color palette and sizing scale it s easy to build the same component with a completely different look in the next project get started installation simple playful elegant brutalist 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 div class flex font sans div class flex none w 48 relative img src classic utility jacket jpg alt class absolute inset 0 w full h full object cover loading lazy div form class flex auto p 6 div class flex flex wrap h1 class flex auto text lg font semibold text slate 900 classic utility jacket h1 div class text lg font semibold text slate 500 110 00 div div class w full flex none text sm font medium text slate 700 mt 2 in stock div div div class flex items baseline mt 4 mb 6 pb 6 border b border slate 200 div class space x 2 flex text sm label input class sr only peer name size type radio value xs checked div class w 9 h 9 rounded lg flex items center justify center text slate 700 peer checked font semibold peer checked bg slate 900 peer checked text white xs div label label input class sr only peer name size type radio value s div class w 9 h 9 rounded lg flex items center justify center text slate 700 peer checked font semibold peer checked bg slate 900 peer checked text white s div label label input class sr only peer name size type radio value m div class w 9 h 9 rounded lg flex items center justify center text slate 700 peer checked font semibold peer checked bg slate 900 peer checked text white m div label label input class sr only peer name size type radio value l div class w 9 h 9 rounded lg flex items center justify center text slate 700 peer checked font semibold peer checked bg slate 900 peer checked text white l div label label input class sr only peer name size type radio value xl div class w 9 h 9 rounded lg flex items center justify center text slate 700 peer checked font semibold peer checked bg slate 900 peer checked text white xl div label div div div class flex space x 4 mb 6 text sm font medium div class flex auto flex space x 4 button class h 10 px 6 font semibold rounded md bg black text white type submit buy now button button class h 10 px 6 font semibold rounded md border border slate 200 text slate 900 type button add to bag button div button class flex none flex items center justify center w 9 h 9 rounded md text slate 300 border border slate 200 type button aria label like svg width 20 height 20 fill currentcolor aria hidden true path fill rule evenodd clip rule evenodd d m3 172 5 172a4 4 0 015 656 0l10 6 343l1 172 1 171a4 4 0 115 656 5 656l10 17 657l 6 828 6 829a4 4 0 010 5 656z svg button div p class text sm text slate 700 free shipping on all continental us orders p form div performance it s tiny never ship unused css again tailwind automatically removes all unused css when building for production which means your final css bundle is the smallest it could possibly be in fact most tailwind projects ship less than 10kb of css to the client learn more optimizing for production index html tailwind config js package json 1 doctype html 2 html lang en 3 head 4 meta charset utf 8 5 meta name viewport content width device width initial scale 1 0 6 title document title 7 link rel stylesheet href build css 8 head 9 body 10 button class button 11 body 12 html 13 build css 1 terminal npx tailwindcss o output build css content index html w watch mobile first responsive everything wrestling with a bunch of complex media queries in your css sucks so tailwind lets you build responsive designs right in your html instead throw a screen size in front of literally any utility class and watch it magically apply at a specific breakpoint learn more responsive design sm md lg xl 2xl workcation com tailwind ui official tailwind css components workcation find a trip that suits you headless ui unstyled fully accessible ui components 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 main class py 6 px 4 sm p 6 md py 10 md px 8 div class max w 4xl mx auto grid grid cols 1 lg max w 5xl lg gap x 20 lg grid cols 2 div class relative p 3 col start 1 row start 1 flex flex col reverse rounded lg bg gradient to t from black 75 via black 0 sm bg none sm row start 2 sm p 0 lg row start 1 h1 class mt 1 text lg font semibold text white sm text slate 900 md text 2xl dark sm text white beach house in collingwood h1 p class text sm leading 4 font medium text white sm text slate 500 dark sm text slate 400 entire house p div div class grid gap 4 col start 1 col end 3 row start 1 sm mb 6 sm grid cols 4 lg gap 6 lg col start 2 lg row end 6 lg row span 6 lg mb 0 img src beach house jpg alt class w full h 60 object cover rounded lg sm h 52 sm col span 2 lg col span full loading lazy img src beach house interior 1 jpg alt class hidden w full h 52 object cover rounded lg sm block sm col span 2 md col span 1 lg row start 2 lg col span 2 lg h 32 loading lazy img src beach house interior 2 jpg alt class hidden w full h 52 object cover rounded lg md block lg row start 2 lg col span 2 lg h 32 loading lazy div dl class mt 4 text xs font medium flex items center row start 2 sm mt 1 sm row start 3 md mt 2 5 lg row start 2 dt class sr only reviews dt dd class text indigo 600 flex items center dark text indigo 400 svg width 24 height 24 fill none aria hidden true class mr 1 stroke current dark stroke indigo 500 path d m12 5 2 5h5l 4 4 2 103 5l12 16l 5 103 3l9 14l 4 4h5l2 5z stroke width 2 stroke linecap round stroke linejoin round svg span 4 89 span class text slate 400 font normal 128 span span dd dt class sr only location dt dd class flex items center svg width 2 height 2 aria hidden true fill currentcolor class mx 3 text slate 300 circle cx 1 cy 1 r 1 svg svg width 24 height 24 fill none stroke currentcolor stroke width 2 stroke linecap round stroke linejoin round class mr 1 text slate 400 dark text slate 500 aria hidden true path d m18 11 034c18 14 897 12 19 12 19s 6 4 103 6 7 966c6 7 655 8 819 5 12 5s6 2 655 6 6 034z path d m14 11a2 2 0 1 1 4 0 2 2 0 0 1 4 0z svg collingwood ontario dd dl div class mt 4 col start 1 row start 3 self center sm mt 0 sm col start 2 sm row start 2 sm row span 2 lg mt 6 lg col start 1 lg row start 3 lg row end 4 button type button class bg indigo 600 text white text sm leading 6 font medium py 2 px 3 rounded lg check availability button div p class mt 4 text sm leading 6 col start 1 sm col span 2 lg mt 6 lg row start 4 lg col span 1 dark text slate 400 this sunny and spacious room is for those traveling light and looking for a comfy and cosy place to lay their head for a night or two this beach house sits in a vibrant neighborhood littered with cafes pubs restaurants and supermarkets and is close to all the major attractions such as edinburgh castle and arthur s seat p div main state variants hover and focus states we got em want to style something on hover stick hover at the beginning of the class you want to add works for focus active disabled focus within focus visible and even fancy states we invented ourselves like group hover learn more handling hover focus and other states projects new title api integration category engineering users title new benefits plan category human resources users title onboarding emails category customer success users new project 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 section header class bg white space y 4 p 4 sm px 8 sm py 6 lg p 4 xl px 8 xl py 6 div class flex items center justify between h2 class font semibold text slate 900 projects h2 a href new class hover bg blue 400 group flex items center rounded md bg blue 500 text white text sm font medium pl 2 pr 3 py 2 shadow sm svg width 20 height 20 fill currentcolor class mr 2 aria hidden true path d m10 5a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2h 3v3a1 1 0 1 1 2 0v 3h6a1 1 0 1 1 0 2h3v6a1 1 0 0 1 1 1z svg new a div form class group relative svg width 20 height 20 fill currentcolor class absolute left 3 top 1 2 mt 2 5 text slate 400 pointer events none group focus within text blue 500 aria hidden true path fill rule evenodd clip rule evenodd d m8 4a4 4 0 100 8 4 4 0 000 8zm2 8a6 6 0 1110 89 3 476l4 817 4 817a1 1 0 01 1 414 1 414l 4 816 4 816a6 6 0 012 8z svg input class focus ring 2 focus ring blue 500 focus outline none appearance none w full text sm leading 6 text slate 900 placeholder slate 400 rounded md py 2 pl 10 ring 1 ring slate 200 shadow sm type text aria label filter projects placeholder filter projects form header ul class bg slate 50 p 4 sm px 8 sm pt 6 sm pb 8 lg p 4 xl px 8 xl pt 6 xl pb 8 grid grid cols 1 sm grid cols 2 lg grid cols 1 xl grid cols 2 gap 4 text sm leading 6 li x for project in projects a href project url class hover bg blue 500 hover ring blue 500 hover shadow md group rounded md p 3 bg white ring 1 ring slate 200 shadow sm dl class grid sm block lg grid xl block grid cols 2 grid rows 2 items center div dt class sr only title dt dd class group hover text white font semibold text slate 900 project title dd div div dt class sr only category dt dd class group hover text blue 200 project category dd div div class col start 2 row start 1 row end 3 sm mt 4 lg mt 0 xl mt 4 dt class sr only users dt dd x for user in project users class flex justify end sm justify start lg justify end xl justify start space x 1 5 img src user avatar alt user name class w 6 h 6 rounded full bg slate 100 ring 2 ring white loading lazy dd div dl a li li class flex a href new class hover border blue 500 hover border solid hover bg white hover text blue 500 group w full flex flex col items center justify center rounded md border 2 border dashed border slate 300 text sm leading 6 text slate 900 font medium py 3 svg class group hover text blue 500 mb 1 text slate 400 width 20 height 20 fill currentcolor aria hidden true path d m10 5a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2h 3v3a1 1 0 1 1 2 0v 3h6a1 1 0 1 1 0 2h3v6a1 1 0 0 1 1 1z svg new project a li ul section component driven worried about duplication don t be if you re repeating the same utilities over and over and over again all you have to do is extract them into a component or template partial and boom you ve got a single source of truth so you can make changes in one place learn more reusing styles react vue angular blade new releases top rated vincent s picks prognosis negative star rating 2 66 rating pg 13 year 2021 genre comedy runtime 1h 46m cast simon pegg zach galifianakis rochelle rochelle star rating 3 25 rating r year 2020 genre romance runtime 1h 56m cast emilia clarke death blow star rating 4 95 rating 18a year 2020 genre action runtime 2h 5m cast idris elba john cena thandiwe newton movies js nav js navitem js list js listitem js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 import nav from nav js import navitem from navitem js import list from list js import listitem from listitem js export default function movies movies return div classname divide y divide slate 100 nav navitem href new isactive new releases navitem navitem href top top rated navitem navitem href picks vincent s picks navitem nav list movies map movie listitem key movie id movie movie list div not into component frameworks use tailwind s apply directive to extract repeated utility patterns into custom css classes just by copying and pasting the list of class names learn more reusing styles weekly one on one date and time thu nov 15 2020 10 00am 11 00am est location kitchener on description no meeting description attendees andrew mcdonald decline accept styles css 1 2 3 4 5 6 7 8 9 10 11 12 btn apply text base font medium rounded lg p 3 btn primary apply bg sky 500 text white btn secondary apply bg slate 100 text slate 900 index html 31 32 33 34 35 36 37 38 39 dd div dl footer class ...
|
