Adding 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.
- 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
After these steps, your project is ready to be styled with Tailwind.
Last modified 6mo ago