# Day 28/2

Plan 28/2:

* Shopify Liquid Filters (array, cart, collection, color, ...)
* Customize speed Js

{% hint style="info" %}
Add Tailwind to project from VS terminal:

1. `npm init`
2. `npm install -D tailwindcss`
3. `npx tailwindcss init`
4. In tailwind.config.js, change content to `"./dist/*.{html,js}"`
5. Create folder dist with "index.html"
6. Create folder src with "input.css"

add `@tailwind base; @tailwind components; @tailwind utilities;`

7. `npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch`
8. Link output to html
9. In package.json, in `"scripts"`, add `"dev": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch"`
10. Run `npm run dev` everytime update code
    {% endhint %}

## Custom tailwind

### In tailwind.config.js

In tailwind.config.js, inside theme, add your customization

`/** @type {import('tailwindcss').Config} */` 

`module.exports = {` 

`theme: {` 

`screens: {` 

`lg: '976px',` 

`xl: '1440px',` 

`},` 

`colors: {` 

`'blue': '#1fb6ff',` 

`'pink': '#ff49db',` 

`},` 

`fontFamily: {` 

`sans: ['Graphik', 'sans-serif'],` 

`serif: ['Merriweather', 'serif'],` 

`},` 

`extend: {` 

`spacing: {` 

`'128': '32rem',` 

`'144': '36rem',` 

`},` 

`borderRadius: {` 

`'4xl': '2rem',` 

`}` 

`}` 

`}` 

`}`

### Using arbitrary values

Use square bracket: `<div class= "top-[117px]"> </div>`

### Function

### Arbitrary properties

You can use an inline css property as class with square bracket

`<div class= "[mask-type: luminance] hover:[mask-type: alpha]"> </div>`

Css variables can also use this way, when they need to change under different conditions:

`<div class= "[--scroll-offset: 56px] lg:[--scroll-offset: 65px]"> </div>`

### Resolving ambiguities

Many utilities share the same namespace but map to different CSS properties. You can hint the underlying type by adding a CSS data type before the value:

`<div class= "text-[length:var(--font-size)]"></div>`

`<div class= "text-[color:var(--text-color)]"></div>`

### Using CSS and @layer

You can add your custom css in `input.css`&#x20;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://dtian.gitbook.io/daily-report-1/day-28-2.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.