Tailwind config

Digital design,

3. semester

tailwind.config

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms")],
};

tailwind.config

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms")],
};

tailwind.config

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,vue,js,ts,jsx,tsx}"],
  theme: {
    colors: {
      "custom": "#5000ca",
    }
    extend: {},
  },
  plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms")],
};

overskriver andre alle farver!

tailwind.config

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,vue,js,ts,jsx,tsx}"],
  theme: {
    colors: {
      "custom": "#5000ca",
    }
    extend: {},
  },
  plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms")],
};

tailwind.config

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,vue,js,ts,jsx,tsx}"],
  theme: {
    colors: {
      "custom": "#5000ca",
    }
    extend: {},
  },
  plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms")],
};

tailwind.config

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        "custom": "#5000ca",
      }
    },
  },
  plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms")],
};

overskriver IKKE andre alle farver!

tailwind.config

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        "custom": "#5000ca",
      }
    },
  },
  plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms")],
};

tailwind.config

  • colors
  • fontFamily
  • spacing
  • osv.

Design

Farvepalette

Farvepalette

colorhunt

Farvepalette

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,vue,js,ts,jsx,tsx}"],
  theme: {
    colors: {
      "primary-dark": "#173f5f",
      "primary-light": "#20639b",
      secondary: "#3caea3",
      tertiary: "#f6d55c",
      accent: "#ed553b",
    }
    extend: {},
  },
  plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms")],
};

Farvepalette

Farvepalette

💩

Farvepalette

💩

Farvepalette

100
200
300
400
500
600
700
800

Farvepalette

100
200
300
400
500
600
700
800

Farvepalette

100
200
300
400
500
600
700
800
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,vue,js,ts,jsx,tsx}"],
  theme: {
    colors: {
      primary: {
        100: "#cffafe",
        200: "#a5f3fc",
        300: "#67e8f9",
        400: "#22d3ee",
        500: "#06b6d4",
        600: "#0891b2",
        700: "#0e7490",
        800: "#155e75",
        900: "#164e63",
      },
    },
    extend: {},
  },
  plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms")],
};

Farvepalette

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,vue,js,ts,jsx,tsx}"],
  theme: {
    colors: {
      primary: {
        100: "#cffafe",
        200: "#a5f3fc",
        300: "#67e8f9",
        400: "#22d3ee",
        500: "#06b6d4",
        600: "#0891b2",
        700: "#0e7490",
        800: "#155e75",
        900: "#164e63",
      },
    },
    extend: {},
  },
  plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms")],
};
100
200
300
400
500
600
700
800

Farvepalette

100
200
300
400
500
600
700
800

Farvepalette

100
200
300
400
500
600
700
800

Farvepalette

200
500
800
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,vue,js,ts,jsx,tsx}"],
  theme: {
    colors: {
      // ...
      primary: {
        light: '#67e8f9',
        DEFAULT: '#06b6d4',
        dark: '#0e7490',
      },
      // ...
    },
    extend: {},
  },
  plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms")],
};

Farvepalette

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,vue,js,ts,jsx,tsx}"],
  theme: {
    colors: {
      // ...
      primary: {
        light: '#67e8f9',
        DEFAULT: '#06b6d4',
        dark: '#0e7490',
      },
      // ...
    },
    extend: {},
  },
  plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms")],
};

Farvepalette

Artikel: Building your color palette

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,vue,js,ts,jsx,tsx}"],
  theme: {
    colors: {
      // ...
      primary: {
        light: '#67e8f9',
        DEFAULT: '#06b6d4',
        dark: '#0e7490',
      },
      // ...
    },
    extend: {},
  },
  plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms")],
};

Farvepalette

https://omatsuri.app/color-shades-generator

https://copypalette.app/

Designinspiration

Link: https://twitter.com/i/events/994601867987619840

Performance

Billeder

Billedformater

.jpg

.png

.webp

Billedformater

.jpg

bruges til billeder uden (semi)transparente pixels

.png

.webp

er et nyere format, som kan bruges til billeder både med og uden (semi)transparente pixels

bruges til billeder med (semi)transparente pixels

Billedformater

.jpg

bruges til billeder uden (semi)transparente pixels

.png

.webp

reducerer filstørrelsen, hvilket forbedrer ydelsen af et website

bruges til billeder med (semi)transparente pixels

2.8 MB

704 kB

.jpg

Billedformater

.jpg

bruges til billeder uden (semi)transparente pixels

.png

2.8 MB

704 kB

-75%

.webp

.webp

reducerer filstørrelsen, hvilket forbedrer ydelsen af et website

Billedformater

.jpg

bruges til billeder uden (semi)transparente pixels

.png

2.8 MB

261 kB

-91%

.avif

.avif

reducerer filstørrelsen yderligere

Billedformater

.jpg

.png

78 kB

-97%

.avif

.avif

reducer antallet af pixler, for at opnå en endnu mindre filstørrelse

Billedformater

.jpg

bruges til billeder uden (semi)transparente pixels

.png

https://squoosh.app/​

add, commit & push

.gitignore

.avif
.webp

brug et online værktøj til at konvertere til et nyt format, samt ændre dimensionerne

https://squoosh.app/​

https://squoosh.app/​

https://squoosh.app/​

https://squoosh.app/​

https://squoosh.app/​

https://squoosh.app/​

<img src="img/photo.jpg" alt="Description" width="360" height="240">
<picture>
  <source srcset="img/photo.avif" type="image/avif">
  <img src="img/photo.webp" alt="Description" width="360" height="240">
</picture>
<picture>
  <source srcset="img/photo.avif" type="image/avif">
  <img src="img/photo.webp" alt="Description" width="360" height="240">
</picture>
<img src="img/photo.jpg" alt="Description" width="360" height="240">