Just-In-Time: The Next Generation of Tailwind CSS

Adam Wathan from Tailwind:

One of the hardest constraints we’ve had to deal with as we’ve improved Tailwind CSS over the years is the generated file size in development. With enough customizations to your config file, the generated CSS can reach 10mb or more, and there’s only so much CSS that build tools and even the browser itself will comfortably tolerate.

Today I’m super excited to share a new project we’ve been working on that makes this constraint a thing of the past: a just-in-time compiler for Tailwind CSS.

If you’re using Tailwind, then the JIT Compiler — Sherlocked from Windi CSS (ref) — will be a very welcome gift. Using it you can basically drop all variants from your config, improve build-times and filesize.

Today our intern Elian integrated @tailwindcss/jit into a Tailwind-based project we’re working on. Compile times dropped by 60% (from ±25s to ±10s) and filesize dropped by 90% (from 918kB to 84kB), as detailed on his blog.

😱 In case you think I’ve switched over to Tailwind: No, I’m still no fan of Tailwind and — unless you use it with @apply — would not recommend using it. On the other hand I do see that it allows one to iterate quickly while prototyping and that is a very welcome gift for developers who are somewhat familiar with CSS. If that floats your boat, then that’s fine. If it doesn’t, then that’s fine too 🙂

However, if one were to ask me to choose between the two, I will always recommend one to learn CSS. That knowledge is relevant today, tomorrow, and still will be 10 years from now, when Tailwind is long gone.

Tailwind CSS: From Zero to Production

Not that I’m a fan of Tailwind, but this (free) video course by the Tailwind folks themselves is a very good starting point to those wanting to get started with it.

Today we’re excited to release Tailwind CSS: From Zero to Production, a new screencast series that teaches you everything you need to know to get up and running with Tailwind CSS v2.0 from scratch.

Embedded above is the introductory video.

Tailwind CSS: From Zero to Production (YouTube) →
Tailwind CSS: From Zero to Production (Announcement) →

Use Tailwind classes within any CSS-in-JS library with Twin

To use Tailwind – or any prebuilt CSS library/framework for that matter – in a React app you can simply import its generated CSS file and use the classes it exposes:

import '../tailwind.generated.css';

// …

const Alert = ({ title = '', message }) => (
    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
        {title && <strong class="font-bold">{title}</strong>}
        <span class="block sm:inline">{message}</span>
        <span class="absolute top-0 bottom-0 right-0 px-4 py-3">
            <svg class="fill-current h-6 w-6 text-red-500" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <title>Close</title>
                <path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
            </svg>
        </span>
    </div>
);

But what if you want to combine Tailwind with 💅 styled-components or 👩‍🎤 emotion? This is where Twin comes in handy:

import React from 'react'
import tw from 'twin.macro'
import styled from '@emotion/styled/macro'
import { css } from '@emotion/core'

const Input = styled.input`
  ${tw`border`}
  ${({ hasHover }) => hasHover && tw`hover:border-black`}
  color: white;
`
export default () => <Input hasHover />

tw will extract the styles from the classes so that the CSS-in-JS Library can use it.

twin.macro →

💡 To work with CSS Class Names in React you can use the classnames package or an implementation on top of it such as classnames-components. I personally prefer one of these methods as these packages allow me to still write my CSS in CSS … #separationofconcerns #embracetheplatform