Pack Documentation
  • Welcome to the Pack!
  • Guides
    • Getting started
    • Creating your first Storefront
    • Previewing your Storefront
    • Editing your Storefront
    • Scheduling Content
    • Start developing
  • Fundamentals
    • Organization
    • Storefronts
    • Customizer
  • For Merchants
    • Creating Organizations
    • Creating Storefronts
    • Deploys
    • Product Bundles
    • Product Groupings
    • Inviting Teammates
    • Redirects
    • Editing Storefront Settings
  • For Marketers
    • Creating Pages
    • Sections
    • Publishing/Unpublishing
    • Managing Media
  • For Developers
    • Storefront Hooks
      • Settings Hooks
      • Page Hooks
      • Product Hooks
      • Collection Hooks
      • Blog Hooks
      • Article Hooks
    • Section API
      • Schema
      • Fields
        • Text
        • Color
        • Text Area
        • Markdown
        • Image
        • Number
        • Link
        • Product
        • Product Bundle
        • HTML
        • Group
        • List
        • Group List
        • Toggle
        • Select
        • Radio Group
        • Tags
    • Creating Storefront Settings
    • Shopify Hooks
      • Cart
        • useCart
        • useCartClear
        • useCartCheckout
        • useCartUpdateNote
        • useCartAddItems
        • useCartUpdateItems
        • useCartRemoveItems
        • useCartAddAttributes
        • useCartUpdateAttributes
        • useCartRemoveAttributes
        • useCartAddDiscount
        • useCartRemoveDiscount
        • useCartAddGiftCard
        • useCartRemoveGiftCard
      • Customer
        • useCustomer
        • useCustomerCreate
        • useCustomerLogin
        • useCustomerLogout
        • useCustomerCreateAddress
        • useCustomerUpdateAddress
        • useCustomerDeleteAddress
        • useCustomerUpdateDetails
        • useCustomerRecoverPassword
        • useCustomerResetPassword
      • Hydrogen Framework
    • Asynchronous Hooks
    • Pack API
      • Queries
    • Transform Specification
    • Adding Tailwind CSS
Powered by GitBook
On this page
  • What is Tailwind CSS?
  • Installing Tailwind on your Storefront project
  • Start up and start developing!
  1. For Developers

Adding Tailwind CSS

PreviousTransform Specification

Last updated 2 years ago

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework based on classes. You can learn more about the benefits and features of Tailwind in their docs .

Installing Tailwind on your Storefront project

  1. Navigate to your Storefront project

  2. Run yarn add -D tailwindcss to install Tailwind package

  3. Initialize Tailwind by running npx tailwindcss init

  4. Configure the tailwind.config.js like so:

    • /** @type {import('tailwindcss').Config} */
      module.exports = {
        content: ['./src/**/*.{js,ts,jsx,tsx}'],
        theme: {
          extend: {},
        },
        plugins: [],
      };
  5. Add the Tailwind directives to your Storefront's stylesheet ./src/styles/storefront.css

    • @tailwind base;
      @tailwind components;
      @tailwind utilities;s

Start up and start developing!

After these steps, your project is ready to be styled with Tailwind.

here