> For the complete documentation index, see [llms.txt](https://dtian.gitbook.io/daily-report-1/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dtian.gitbook.io/daily-report-1/day-28-2.md).

# 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;