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 and PostCSS config files 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 npm run dev can be run from there.

pnpm init && pnpm install -D tailwindcss postcss postcss-cli cssnano autoprefixer

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 && npx tailwindcss init -p

Configure Tailwind to remove unused styles in production.

Example tailwind.config.js for WordPress:

module.exports = {
  content: [
    // "./**/*.{php,js,html}",
    "./template-parts/**/*.html",
    "./**/*.php",
  ],
  ...
}

Example tailwind.config.js for Shopify content:

content: ["./layout/theme.liquid", "./templates/*.liquid", "./assets/*.js"],

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

@tailwind base;
@tailwind components;
@tailwind utilities;

Configure /css/postcss.config.js.

This config uses postcss-preset-env which enables use of custom media queries, amongst other things. It includes autoprefixer which is why it is turned off in cssnano. Tailwind recommends letting tailwindcss/nesting handle the nesting instead of postcss-preset-env.

module.exports = {
  plugins: {
    "tailwindcss/nesting": {},
    tailwindcss: { config: './css/tailwind.config.js' },
    autoprefixer: {},
    cssnano: {
      preset: "default",
      autoprefixer: { add: false },
    },
  },
}

Or if using postcss-prefix-selector:

module.exports = {
  plugins: {
    'tailwindcss/nesting': {},
    tailwindcss: { config: './css/tailwind.config.js' },
    autoprefixer: {},
    'postcss-prefix-selector': {
      prefix: '.PREFIX-ADDED-HERE',
    },
    cssnano: {
      preset: 'default',
      autoprefixer: { add: false },
    },
  },
};

Add scripts to package.json for WordPress:

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

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>
  );
}