Adding Tailwind CSS

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

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.