Day 28/2

Plan 28/2:

• Shopify Liquid Filters (array, cart, collection, color, ...)

• Customize speed Js

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;

1. npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

2. Link output to html

3. In package.json, in "scripts", add "dev": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch"

4. Run npm run dev everytime update code

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