|
1 | 1 | --- |
2 | 2 | title: Installation |
3 | 3 | --- |
4 | | -# File exists for redirection purposes |
| 4 | + |
| 5 | +# Installation |
| 6 | + |
| 7 | +Since Storefront UI is designed to fit seamlessly into your Tailwind CSS workflow, there will be different installation steps depending on your environment. |
| 8 | + |
| 9 | +### Create Your Next Project |
| 10 | + |
| 11 | +If you don't already have a Qwik application, you can use the `create qwik@latest` command.<br /> |
| 12 | +Here is the Qwik official [docs](https://qwik.builder.io/docs/getting-started/#create-an-app-using-the-cli). |
| 13 | + |
| 14 | +```bash |
| 15 | +# npm |
| 16 | +npx create qwik@latest |
| 17 | + |
| 18 | +# yarn |
| 19 | +yarn create qwik@latest |
| 20 | + |
| 21 | +# pnpm |
| 22 | +pnpm create qwik@latest |
| 23 | +``` |
| 24 | + |
| 25 | +### Install Tailwind and Storefront UI Dependencies |
| 26 | + |
| 27 | +Next, you'll need to install Tailwind CSS and PostCSS, as well as the Storefront UI's Qwik library and Tailwind preset. |
| 28 | + |
| 29 | +> Run these commands form your project folder. |
| 30 | +
|
| 31 | +```bash |
| 32 | +# npm |
| 33 | +npm qwik add tailwind |
| 34 | +npm i -D @storefront-ui/tailwind-config |
| 35 | +npm i qwik-storefront-ui |
| 36 | + |
| 37 | +# yarn |
| 38 | +yarn qwik add tailwind |
| 39 | +yarn add -D @storefront-ui/tailwind-config |
| 40 | +yarn add qwik-storefront-ui |
| 41 | + |
| 42 | +# pnpm |
| 43 | +pnpm qwik add tailwind |
| 44 | +pnpm add -D @storefront-ui/tailwind-config |
| 45 | +pnpm add qwik-storefront-ui |
| 46 | +``` |
| 47 | + |
| 48 | +### Modify Your Tailwind Configuration File |
| 49 | + |
| 50 | +Storefront UI plugs into your Tailwind configuration to add any base styles and CSS variables. To do this, you need to import the Storefront UI Tailwind preset and add it to your `tailwind.config.js` file. |
| 51 | + |
| 52 | +::tip Add a path to your installed package |
| 53 | + |
| 54 | +In order for Tailwind to properly detect the utility classes used in Storefront UI components, you need to add a path to wherever your `node_modules` folder is located to the `content` property. In the example below, we're using the default location for `node_modules`, but this may change if you're working in a monorepo. |
| 55 | +:: |
| 56 | + |
| 57 | +```js |
| 58 | +// tailwind.config.js |
| 59 | +const { tailwindConfig } = require('@storefront-ui/tailwind-config'); |
| 60 | + |
| 61 | +/** @type {import('tailwindcss').Config} */ |
| 62 | +module.exports = { |
| 63 | + presets: [tailwindConfig], |
| 64 | + content: ['./src/**/*.{js,ts,jsx,tsx,mdx}', './node_modules/qwik-storefront-ui/**/*.{cjs,mjs}'], |
| 65 | + theme: { |
| 66 | + extend: {}, |
| 67 | + }, |
| 68 | + plugins: [], |
| 69 | +}; |
| 70 | +``` |
| 71 | + |
| 72 | +### You're Ready to Go! |
| 73 | + |
| 74 | +Now, you can import Storefront UI components in your app from the `qwik-storefront-ui` in your project. |
| 75 | + |
| 76 | +<<<../../../website/src/routes/showcases/Button/ButtonSizes/index.tsx |
| 77 | + |
| 78 | +<Showcase showcase-name="Button/ButtonBlock" :show-source="false"/> |
0 commit comments