Add custom colors and screens on tailwind config js

nikonst · nikonst · commit a9c8998764b3 · 2024-03-28T13:07:57.000+02:00
diff --git a/tailwind/Example2/dist/index.html b/tailwind/Example2/dist/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Tailwind Demo</title>
+    <title>Tailwind Landing Page</title>
     <link href="./styles.css" rel="stylesheet">
 </head>
 <body>
diff --git a/tailwind/Example2/tailwind.config.js b/tailwind/Example2/tailwind.config.js
@@ -2,7 +2,24 @@
 module.exports = {
   content: ["./dist/*.{html,js}"],
   theme: {
-    extend: {},
+    screens: {
+      sm:'480px',
+      md:'768px',
+      lg:'976px',
+      xl:'1440px',
+    },
+    extend: {
+      colors: {
+        brightRed: 'hsl(12, 88%, 59%)',
+        brightRedLight: 'hsl(12, 88%, 69%)',
+        brightRedSupLight: 'hsl(12, 88%, 95%)',
+        darkBlue: 'hsl(228, 39%, 23%)',
+        darkGrayishBlue: 'hsl(227, 12%, 61%)',
+        veryDarkBlue: 'hsl(233, 12%, 13%)',
+        veryPaleRed: 'hsl(13, 100%, 96%)',
+        veryLightGray: 'hsl(0, 0%, 98%)',
+      }
+    },
   },
   plugins: [],
 }
