• 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 ->

    *

    Simple

    * Playful

    * Elegant

    * Brutalist

    CLASSIC UTILITY JACKET

    KIDS JUMPSUIT

    FANCY SUIT JACKET

    RETRO SHOE

    $110.00

    $39.00

    $600.00

    $89.00

    In stock

    In stock

    In stock

    In stock

    * XSSXSSXSSXSS

    * SSSS

    * MMMM

    * LLLL

    * XLXLXLXL

    Size Guide

    Size Guide

    Size Guide

    Size Guide

    Buy nowBuy nowBuy nowBuy now Add to bagAdd to bagAdd to bagAdd to bag Free shipping on all continental US orders. Free shipping on all continental US orders. Free shipping on all continental US orders. Free shipping on all continental US orders.

    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

    Classic Utility Jacket

    $110.00

    In stock

    XS

    S

    M

    L

    XL

    Size Guide

    Buy now Add to bag

    Free shipping on all continental US orders.

    PERFORMANCE

    It’s tiny in production. 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 ->

    * Production build 2,413.4kB * Purged 0 unused classes

    -0 lines

    fixed flex-col rounded-sm shadow px-4 justify-content text-center flex-shrink-0 md:text-left h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto text-lg text-purple-500 md:text-left text-gray-600 text-green-400 text-blue-500 rounded-pill p-4 max-w-screen-xl mt-5 leading-7 whitespace-nowrap sm:gap-6 lg:max-w-4xl lg:mx-auto xl:max-w-none flex-1 xl:mx-0 xl:grid-cols-4 border border-gray-200 text-4xl leading-6 leading-10 font-extrabold leading-5 h-5 w-5 text-green-500 text-5xl leading-none font-extrabold text-white tracking-tight border-t text-sm border-indigo-600 py-4 font-medium px-5 flex items-center space-x-3 text-base leading-6 text-white absolute right-full ml-4 bottom-0 transform -translate-x-1/2 py-3 mx-4 w-full duration-150 h-full transition py-0 pl-4 pr-8 border-transparent bg-transparent text-gray-500 px-5 py-3 appearance-none underline bg-indigo-700 min-w-full divide-y divide-gray-200 items-baseline text-indigo-600 hover:text-indigo-500

    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

    Successfully saved!

    Anyone with a link can now view this file.

    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 ->

    workcation.com

    Entire house

    BEACH HOUSE IN COLLINGWOOD

    4.94 (128)

    Collingwood, Ontario ------------------------- Hosted by Kevin Francis

    Check availability

    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

    Entire house

    Beach House in Collingwood

    4.94 (128)

    ·
    Collingwood, Ontario

    Hosted by Kevin Francis

    Check availability

    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 ->

    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

    Projects

    New

    Title

    {item.title}

    Category

    {item.category}

    Users

    New Project

    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 ->

    *

    React

    *

    Vue

    *

    Blade

    *

    Featured

    *

    Popular

    *

    Recent

    HANK’S JUICIEST BEEF BURGER

    * Rating 4.94

    * Time 20m

    * Difficulty · Easy * Servings · 4 servings

    * By Hank Douglas

    SOUTHERN FRIED CHICKEN SANDWICH

    * Rating 4.94

    * Time 30m

    * Difficulty · Intermediate * Servings · 4 servings * By Nicholas Denver LILY’S HEALTHY BEEF BURGER

    * Rating 4.94

    * Time 20m

    * Difficulty · Easy * Servings · 6 servings

    * By Lily Ford

    Recipes.js

    Nav.js

    NavItem.js

    List.js

    ListItem.js

    * Recipes.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

    22import Nav from './Nav.js' import NavItem from './NavItem.js' import List from './List.js' import ListItem from './ListItem.js' export default function Recipes({ recipes }) {

    return (

    Featured Popular Recent

    {recipes.map((recipe) => (

    ))}

    )

    }

    Not into component frameworks and like to keep it old school? 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 ->

    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 Parsons

    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-rose-500 text-white;

    }

    .btn--secondary {

    @apply bg-gray-100 text-black;

    }

    INDEX.HTML

    31

    32

    33

    34

    35

    36

    37

    38

    39

    Decline Accept

    DARK MODE

    Now with Dark Mode. Don’t want to be one of those websites that blinds people when they open it on their phone at 2am? Enable dark mode in your configuration file then throw dark: in front of any color utility to apply it when dark mode is active. Works for background colors, text colors, border colors, and even gradients.

    Learn more ->

    Enable dark mode

    Ep. 128

    SCALING CSS AT HEROKU WITH UTILITY CLASSES

    Full Stack Radio

    24:16

    75:50

    1.0x

    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

    Ep. 128

    Scaling CSS at Heroku with Utility Classes

    Full Stack Radio

    24:16

    75:50

    1.0x

    CUSTOMIZATION

    Extend it, tweak it, change it. Tailwind includes an expertly crafted set of defaults out-of-the-box, but literally everything can be customized — from the color palette to the spacing scale to the box shadows to the mouse cursor. Use the tailwind.config.js file to craft your own design system, then let Tailwind transform it into your own custom CSS framework.

    Learn more ->

    *

    Simple

    * Playful

    * Elegant

    * Brutalist

    TYPOGRAPHY

    * font-display Inter * font-body Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mi ultrices non pharetra, eros enim. Habitant suspendisse ultricies.

    COLOR

    * bg-primary-{50-900}

    *

    *

    *

    *

    *

    *

    *

    *

    *

    *

    * bg-gray-{50-900}

    *

    *

    *

    *

    *

    *

    *

    *

    *

    *

    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

    module.exports = {

    theme: {

    fontFamily: {

    display: ,

    body: ,

    },

    colors: {

    primary: {

    50: '#eef2ff',

    100: '#e0e7ff',

    200: '#c7d2fe',

    300: '#a5b4fc',

    400: '#818cf8',

    500: '#6366f1',

    600: '#4f46e5',

    700: '#4338ca',

    800: '#3730a3',

    900: '#312e81',

    },

    gray: {

    50: '#fafafa',

    100: '#f4f4f5',

    200: '#e4e4e7',

    300: '#d4d4d8',

    400: '#a1a1aa',

    500: '#71717a',

    600: '#52525b',

    700: '#3f3f46',

    800: '#27272a',

    900: '#18181b',

    },

    },

    },

    }

    MODERN FEATURES

    Cutting-edge is our comfort zone. Tailwind is unapologetically modern, and takes advantage of all the latest and greatest CSS features to make the developer experience as enjoyable as possible. We've got first-class CSS grid support, composable transforms and gradients powered by CSS variables, support for modern state selectors like :focus-visible, and tons more.

    Learn more ->

    *

    CSS Grid

    * Transforms

    * Gradients

    1

    2

    3

    4

    5

    *

    *

    *

    *

    *

    *

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    1

    2

    3

    4

    5

    EDITOR TOOLS

    World-class IDE integration. Worried about remembering all of these class names? The Tailwind CSS IntelliSense extension for VS Code has you covered. Get intelligent autocomplete suggestions, linting, class definitions and more, all within your editor and with no configuration required.

    Learn more ->

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23 Jane Cooper Admin

    Regional Paradigm Technician

    Email

    PROBLEMS

    *

    'flex' applies the same CSS property as 'block'.

    cssConflict

    *

    'block' applies the same CSS property as 'flex'.

    cssConflict

    READY-MADE COMPONENTS Move even faster with Tailwind UI. Tailwind UI is a collection of beautiful, fully responsive UI components, designed and developed by us, the creators of Tailwind CSS. It's got hundreds of ready-to-use examples to choose from, and is guaranteed to help you find the perfect starting point for what you

    want to build.

    Learn more ->

    *

    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 Configuration

    * Breakpoints

    * Customizing Colors * Customizing Spacing * Configuring Variants

    * Plugins

    * Presets

    *

    COMMUNITY

    * GitHub

    * Discord

    * Twitter

    * YouTube

    Details

    1

    Copyright © 2024 ArchiveBay.com. All rights reserved. Terms of Use | Privacy Policy | DMCA | 2021 | Feedback | Advertising | RSS 2.0