Skip to content

Tailwind CSS

Resources

VS Code

Tailwind CSS IntelliSense

https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

Headwind

https://marketplace.visualstudio.com/items?itemName=heybourn.headwind

A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order:

https://github.com/tailwindlabs/prettier-plugin-tailwindcss

Components

Tools

[https://chrome.google.com/webstore/detail/gimli-tailwind/fojckembkmaoehhmkiomebhkcengcljl](Gimli Chrome browser extension)

https://tailwindcss-calculator.com/

https://styleguidefortailwind.com/

https://github.com/timlrx/tailwind-nextjs-starter-blog - Starter Blog Template (Next,js + Tailwind)

Copy Tailwind CSS code from any website

Installation for Wordpress and Shopify

For Next.js see: https://tailwindcss.com/docs/guides/nextjs

These setup instructions will install the Tailwind css file in the css folder. The final output file tailwind.css is saved in the top level. The package.json is also in the top level folder, so pnpm dev can be run from there.

Update for Tailwind v4.

pnpm init && pnpm install -D tailwindcss @tailwindcss/cli

For plugin development it may require postcss-prefix-selector to isolate the styles.

pnpm install -D postcss-prefix-selector

Make sure to add /node_modules to .gitignore.

Install in /css and generate config files:

mkdir css && cd css

Config file not needed anymore.

Add Tailwind to the main css file, /css/tailwind.css.

@import "tailwindcss";

Add scripts to package.json for WordPress:

    "dev": "tailwindcss -i ./css/tailwind.css -o ./tailwind.css --watch",
    "build": "tailwindcss -i ./css/tailwind.css -o ./tailwind.css --minify"

Add scripts to package.json for Shopify:

    "dev": "postcss css/tailwind.css --output assets/tailwind.css --watch",
    "build": "postcss css/tailwind.css --output assets/tailwind.css"

Start Tailwind for development.

pnpm dev

Typography / Prose plugin

https://tailwindcss.com/docs/typography-plugin<br> Beautiful typographic defaults for HTML you don't control. Provides a set of prose classes.

npm install -D @tailwindcss/typography

Forms Plugin

https://tailwindcss.com/docs/plugins#forms

Wordpress theme setup

Delete everything out of style.css except theme header info.

In functions.php comment out style.css and add in tailwind.css:

wp_enqueue_style(projectX-style',  get_template_directory_uri() . '/tailwind.css', array(), filemtime(get_stylesheet_directory() . '/tailwind.css'));

Or insert tailwind.css directly into the header. So, remove css from functions.php as per above. Then add to header.php.

<style media="screen">
  <?php include dirname(__FILE__).'/tailwind.css'; ?>
</style>

Shopify theme setup

Add to theme.liquid after the base.css line.

{{ 'tailwind.css' | asset_url | stylesheet_tag }}

Globals

Add globals in styles/globals.css:

@layer base {
  p {
    @apply pt-4;
  }
}

Customise the theme

https://tailwindcss.com/docs/adding-custom-styles#customizing-your-theme

Add custom font.

  theme: {
    fontFamily: {
      sans: ["aktiv-grotesk", "sans-serif"],
    },
  }

Extend the theme:

  theme: {
    extend: {
      fontSize: {
        md: "1.0625rem",
      },
      fontFamily: {
        usual: ["usual", "sans-serif"],
      },
      colors: {
        'blk': '#243c5a',
      },
    },
  },

Breakpoints

Can be used in the globals stylesheet like so:

@media screen(md) {

}

With Next.js

To conditionally show a class would be something like this:

function Notification() {
  const [isNotification, setIsNotification] = useState(false);

  return (
    <div className={` ${isNotification ? "animate-ping" : null} h-2 w-2 m-5 bg-sky-400 rounded-full`}></div>
  );
}