Meta tags:

Headings (most frequently used words):

presets, plugins, core, and, creating, preset, how, configurations, are, merged, extending, multiple, disabling, the, default, configuration, theme, variants, getting, started, concepts, customization, base, styles, layout, flexbox, grid, spacing, sizing, typography, backgrounds, borders, effects, filters, tables, transitions, animation, transforms, interactivity, svg, accessibility, official, on, this, page,

Text of the page (most frequently used words):
the (48), presets (36), tailwind (33), configuration (28), #preset (26), you (19), #config (14), and (14), default (13), plugins (13), theme (13), merged (13), module (13), exports (13), your (13), this (12), require (12), that (11), for (11), configurations (10), color (10), backdrop (10), background (10), are (9), example (9), own (8), extend (8), font (8), coreplugins (8), width (8), opacity (8), grid (8), css (8), variants (7), can (7), like (7), with (7), same (7), option (7), object (7), all (6), array (6), acmecorp (6), across (6), project (6), top (6), border (6), text (6), multiple (5), how (5), colors (5), spacing (5), base (5), would (5), adding (5), any (5), customizations (5), level (5), more (5), just (5), ring (5), style (5), align (5), flex (5), will (4), disable (4), they (4), way (4), include (4), about (4), documentation (4), keys (4), key (4), file (4), dark (4), transition (4), mode (4), divide (4), position (4), height (4), disabling (3), core (3), creating (3), page (3), also (3), from (3), completely (3), start (3), set (3), against (3), float (3), false (3), configure (3), plugin (3), add (3), options (3), light (3), typography (3), rotate (3), transform (3), box (3), place (3), self (3), items (3), content (3), justify (3), auto (3), extending (2), github (2), preflight (2), design (2), defaults (2), empty (2), provided (2), palette (2), not (2), using (2), used (2), important (2), resolved (2), fonts (2), useful (2), want (2), split (2), reusable (2), into (2), margin (2), padding (2), replace (2), replaces (2), cursor (2), possible (2), allowing (2), their (2), which (2), learn (2), works (2), shallowly (2), replacing (2), exception (2), collected (2), prefix (2), specific (2), read (2), use (2), overrides (2), extensions (2), sans (2), tailwindcss (2), aspect (2), ratio (2), 100 (2), projects (2), other (2), line (2), stroke (2), origin (2), animation (2), layout (2), sepia (2), saturate (2), invert (2), hue (2), grayscale (2), contrast (2), brightness (2), blur (2), filter (2), shadow (2), blend (2), offset (2), size (2), break (2), overflow (2), decoration (2), placeholder (2), list (2), max (2), min (2), sizing (2), rows (2), columns (2), end (2), template (2), styles (2), components (2), support (2), version (2), search (2), edit, within, provide, complete, system, its, doesn, families, sizes, values, etc, generated, both, these, custom, were, when, note, overlap, last, wins, accept, composable, chunks, imported, independently, configured, behaves, differently, depending, whether, means, has, been, added, find, yourself, wanting, sign, should, probably, remove, basis, instead, two, make, register, while, additional, only, applied, rest, remaining, each, carefully, makes, most, sense, explained, detail, next, separator, variantorder, darkmode, purge, following, simply, present, those, found, information, create, itself, themselves, minheight, backgroundcolor, active, 12rem, here, assuming, was, saved, actual, under, see, contain, including, configuring, details, blue, pink, gray, darkest, lightest, fontfamily, flexgrow, zindex, serif, graphik, f9fafc, e0e6ed, c0ccda, 3c4858, 1f2d3d, ff16d1, ff49db, ff7ce5, 009eeb, 1fb6ff, 85d7ff, regular, objects, taking, exact, shape, very, teams, manage, brand, where, single, source, truth, common, lets, specify, making, easy, package, reuse, different, intelligently, acting, clamp, forms, official, screen, readers, accessibility, fill, svg, user, select, resize, pointer, events, outline, appearance, interactivity, skew, translate, scale, transforms, delay, timing, function, duration, property, transitions, table, collapse, tables, drop, filters, mix, effects, radius, borders, gradient, stops, image, repeat, clip, attachment, backgrounds, word, whitespace, vertical, type, letter, variant, numeric, weight, smoothing, family, space, between, gap, flow, row, column, order, shrink, grow, wrap, direction, flexbox, index, visibility, right, bottom, left, overscroll, behavior, fit, isolation, clear, floats, display, container, breakpoints, time, customization, functions, directives, new, utilities, extracting, hover, focus, states, responsive, utility, first, concepts, browser, optimizing, production, preprocessors, editor, upgrade, guide, release, notes, installation, getting, started, screencasts, resources, news, playground, open, site, navigation, ctrl, press, quick, anything, home, looking,

Text of the page (random words):
presets tailwind css you re looking at the documentation for tailwind css v2 go to tailwind css v3 go to tailwind css v3 tailwind css home page quick search for anything press ctrl and k to search tailwind css version v3 v 2 2 16 v1 9 6 v0 7 4 tailwind css on github open site navigation tailwind css version v3 v 2 2 16 v1 9 6 v0 7 4 documentation components playground news resources screencasts getting started installation release notes upgrade guide editor support using with preprocessors optimizing for production browser support core concepts utility first responsive design hover focus other states dark mode adding base styles extracting components adding new utilities functions directives customization configuration just in time mode theme breakpoints colors spacing variants plugins presets base styles preflight layout container box decoration break box sizing display floats clear isolation object fit object position overflow overscroll behavior position top right bottom left visibility z index flexbox and grid flex direction flex wrap flex flex grow flex shrink order grid template columns grid column start end grid template rows grid row start end grid auto flow grid auto columns grid auto rows gap justify content justify items justify self align content align items align self place content place items place self spacing padding margin space between sizing width min width max width height min height max height typography font family font size font smoothing font style font weight font variant numeric letter spacing line height list style type list style position placeholder color placeholder opacity text align text color text opacity text decoration text transform text overflow vertical align whitespace word break backgrounds background attachment background clip background color background opacity background origin background position background repeat background size background image gradient color stops borders border radius border width border color border opacity border style divide width divide color divide opacity divide style ring width ring color ring opacity ring offset width ring offset color effects box shadow opacity mix blend mode background blend mode filters filter blur brightness contrast drop shadow grayscale hue rotate invert saturate sepia backdrop filter backdrop blur backdrop brightness backdrop contrast backdrop grayscale backdrop hue rotate backdrop invert backdrop opacity backdrop saturate backdrop sepia tables border collapse table layout transitions and animation transition property transition duration transition timing function transition delay animation transforms transform transform origin scale rotate translate skew interactivity appearance cursor outline pointer events resize user select svg fill stroke stroke width accessibility screen readers official plugins typography forms aspect ratio line clamp presets creating your own reusable configuration presets by default any configuration you add in your own tailwind config js file is intelligently merged with the default configuration with your own configuration acting as a set of overrides and extensions the presets option lets you specify a different configuration to use as your base making it easy to package up a set of customizations that you d like to reuse across projects tailwind config js module exports presets require acmecorp tailwind base this can be very useful for teams that manage multiple tailwind projects for the same brand where they want a single source of truth for colors fonts and other common customizations creating a preset presets are just regular tailwind configuration objects taking the exact same shape as the configuration you would add in your tailwind config js file example preset module exports theme colors blue light 85d7ff default 1fb6ff dark 009eeb pink light ff7ce5 default ff49db dark ff16d1 gray darkest 1f2d3d dark 3c4858 default c0ccda light e0e6ed lightest f9fafc fontfamily sans graphik sans serif extend flexgrow 2 2 3 3 zindex 60 60 70 70 80 80 90 90 100 100 plugins require tailwindcss typography require tailwindcss aspect ratio as you can see presets can contain all of the configuration options you re used to including theme overrides and extensions adding plugins configuring a prefix and so on read about how configurations are merged for more details assuming this preset was saved at tailwind preset js you would use it by adding it to the tailwind config js file in your actual project under the presets key tailwind config js module exports presets require tailwind preset js customizations specific to this project would go here theme extend minheight 48 12rem variants extend backgroundcolor active by default presets themselves extend tailwind s default configuration just like your own configuration would if you d like to create a preset that completely replaces the default configuration include an empty presets key in the preset itself example preset module exports presets theme plugins for more information read about disabling the default configuration how configurations are merged project specific configurations those found in your tailwind config js file are merged against presets the same way they are merged against the default configuration the following options in tailwind config js simply replace the same option if present in a preset purge darkmode prefix important variantorder separator the remaining options are each carefully merged in the way that makes the most sense for that option explained in more detail next theme the theme object is merged shallowly with top level keys in tailwind config js replacing the same top level keys in any presets the exception to this is the extend key which is collected across all configurations and applied on top of the rest of the theme configuration learn more about how the theme option works in the theme configuration documentation variants the variants object is merged shallowly just like the theme object with top level keys replacing the same top level keys in any presets the extend key is the only exception and is collected across all configurations just like with theme learn more about how the variants option works in the variants configuration documentation presets the presets array is merged across configurations allowing presets to include their own presets which can also include their own presets plugins the plugins array is merged across configurations to make it possible for a preset to register plugins while also allowing you to add additional plugins at the project level this means it s not possible to disable a plugin that has been added by a preset if you find yourself wanting to disable a plugin in a preset it s a sign that you should probably remove that plugin from the preset and include it on a project by project basis instead or split your preset into two presets core plugins the coreplugins option behaves differently depending on whether you configure it as an object or as an array if you configure coreplugins as an object it is merged across configurations example preset js module exports coreplugins float false tailwind config js module exports presets require example preset js this configuration will be merged coreplugins cursor false if you configure coreplugins as an array it replaces any coreplugins configuration provided by your configured preset s example preset js module exports coreplugins float false tailwind config js module exports presets require example preset js this will replace the configuration in the preset coreplugins float padding margin extending multiple presets the presets option is an array and can accept multiple presets this is useful if you want to split your reusable customizations up into composable chunks that can be imported independently tailwind config js module exports presets require acmecorp tailwind colors require acmecorp tailwind fonts require acmecorp tailwind spacing when adding multiple presets it s important to note that if they overlap in any way they are resolved the same way your own customizations are resolved against a preset and the last configuration wins for example if both of these configurations provided a custom color palette and were not using extend the color palette from configuration b would be used tailwind config js module exports presets require acmecorp configuration a require acmecorp configuration b disabling the default configuration if you d like to completely disable the default configuration and start with no base configuration at all set presets to an empty array tailwind config js module exports presets this will completely disable all of tailwind s defaults so no colors font families font sizes spacing values etc will be generated at all you can also do this from within a preset if you d like your preset to provide a complete design system on its own that doesn t extend tailwind s defaults example preset js module exports presets tailwind config js module exports presets require example preset js plugins preflight edit this page on github on this page creating a preset how configurations are merged theme variants presets plugins core plugins extending multiple presets disabling the default configuration