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):
solute joy to work with braunson yager full stack developer designer using any css framework other than tailwind seems like a step backward in web development at this point absolutely nothing else comes close to making me as productive during the design phase of development than tailwind zac jordan zajdel developer tailwind has completely revolutionized our devops pipeline the cli works consistently no matter what framework is in place joel varty president cto agilitycms tailwind is like a really nice pair of socks you think okay how good can a pair of socks be then you put socks on and you are like these are socks neil docherty software engineer tailwind unified our css work across different client projects more than any other methodology while letting us keep our bespoke designs and even improved performance and stability of our sites søren kottal developer tailwind is the only way to work with css at scale aaron francis developer tailwindcss has single handedly been the biggest and most impactful change for our team s development workflow i m glad i live in a universe where tailwind exists sanjay soundarajan front end developer tailwind solves a complex problem in an elegant way it provides a ready to use ui all while not compromising on enabling developers to quickly build anything imaginable brent garner developer skip to the end use tailwindcss kent c dodds developer and educator i was bad at front end until i discovered tailwind css i have learnt a lot more about design and css itself after i started working with tailwind creating web pages is 5x faster now shruti balasa full stack web developer tech educator i don t use it but if i would use something i d use tailwind pieter levels maker with tailwind i can offer my clients faster turnaround times on custom wordpress themes both for initial builds and for future revisions greg sullivan wordpress developer thanks to tailwindcss css started to make sense to me nuno maduro core team member laravelphp tailwind clicked for me almost immediately i can t picture myself writing another bem class ever again happy user since the first public release productivity is at an all time high thanks to tailwindcss igor randjelovic developer css has always been the hardest part of offering a digital service it made me feel like a bad developer tailwind gives me confidence in web development again their docs are my first port of call dan malone founder of mawla_io i thought why would i need tailwind css i already know css and use bootstrap but after giving it a try i decided to switch all my projects to tailwind sergio peris devops engineer network administrator the tailwind docs are its real magic it is actually better documented than css itself it s such a pleasure to use zach knickerbocker developer i ve never felt more confident designing and styling websites and web apps than when i ve used tailwindcss glenn meyer developer tried it once never looked back tailwindcss convert since 0 7 and it just keeps getting better and better jan d hollander front end developer if you work at an agency and deal with hundreds of unique sites each of them having their own custom css is a nightmare do your future self a favor and use tailwind andrew brown before tailwind css i was banging my head against the wall trying to make sense of my css spaghetti now i am banging my head against the wall wondering why i didn t try it earlier my head hurts and my wall has a big hole in it but at least using css is pleasant again marc köhlbrugge i was skeptical at first and resisted for a long time but after doing the first projects with tailwind css this year normal css just feels wrong and slow david hellmann digital designer developer after using tailwind for the first time i wondered why i used anything else it s now my go to css framework for any application production or prototype joshua lowe developer tailwind not only made me able to focus on building great ui s but it also improved my overall css skills by having such a wonderful docs site when i needed to handwrite css josh manders developer using tailwind is an accelerant for rapid prototyping design systems strong documentation helpful community and instant results ian gaenssley design operations lead at bettercloud i instinctively hated utility css but tailwind completely converted me it reignited my excitement for front end development and implementing custom designs jess archer full stack developer tailwind css bridges the gap between design and dev more than anything else it reintroduces context to development limits cognitive load with choice architecture grants access to a token library out of the box and is incredibly easy to pickup it helped my design career so much corey ginnivan co founder of featureboard when i m working on a project that isn t using tailwind first i yell then i take a deep 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 ...
|
