# 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} */`&#x20;

`module.exports = {`&#x20;

`theme: {`&#x20;

`screens: {`&#x20;

`lg: '976px',`&#x20;

`xl: '1440px',`&#x20;

`},`&#x20;

`colors: {`&#x20;

`'blue': '#1fb6ff',`&#x20;

`'pink': '#ff49db',`&#x20;

`},`&#x20;

`fontFamily: {`&#x20;

`sans: ['Graphik', 'sans-serif'],`&#x20;

`serif: ['Merriweather', 'serif'],`&#x20;

`},`&#x20;

`extend: {`&#x20;

`spacing: {`&#x20;

`'128': '32rem',`&#x20;

`'144': '36rem',`&#x20;

`},`&#x20;

`borderRadius: {`&#x20;

`'4xl': '2rem',`&#x20;

`}`&#x20;

`}`&#x20;

`}`&#x20;

`}`

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