Skip to content

Commit 0699dcd

Browse files
mertasanmertasan
committed
new example: color-variable-helper
1 parent be0e2e0 commit 0699dcd

File tree

8 files changed

+920
-0
lines changed

8 files changed

+920
-0
lines changed

‎examples/color-variable-helper/clean.css

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
:root {
2+
--colors-primary: #ff0;
3+
--colors-secondary: #000000;
4+
--colors-gray: #6B7280;
5+
--colors-blue: rgb(0,0,254);
6+
--colors-red-400: rgba(254,0,0,0.5);
7+
--colors-red-500: rgba(254,0,0,1);
8+
--colors-red-400-rgb: 254,0,0;
9+
--colors-red-500-rgb: 254,0,0;
10+
--colors-green: rgb(0,255,0);
11+
--colors-primary-rgb: 255,255,0;
12+
--colors-secondary-rgb: 0,0,0;
13+
--colors-gray-rgb: 107,114,128;
14+
--colors-blue-rgb: 0,0,254;
15+
--colors-green-rgb: 0,255,0;
16+
--sizes-small: 10px;
17+
--sizes-medium: 2rem;
18+
--sizes-large: 100%
19+
}
20+
21+
.text-primary {
22+
--tw-text-opacity: 1;
23+
color: rgba(var(--colors-primary-rgb), var(--tw-text-opacity))
24+
}
25+
26+
.text-blue {
27+
--tw-text-opacity: 1;
28+
color: rgba(var(--colors-blue-rgb), var(--tw-text-opacity))
29+
}
30+
31+
.text-opacity-50 {
32+
--tw-text-opacity: 0.5
33+
}
34+
35+
.bg-secondary {
36+
--tw-bg-opacity: 1;
37+
background-color: rgba(var(--colors-secondary-rgb), var(--tw-bg-opacity))
38+
}
39+
40+
.bg-white {
41+
--tw-bg-opacity: 1;
42+
background-color: rgba(255, 255, 255, var(--tw-bg-opacity))
43+
}
44+
45+
.bg-red-400 {
46+
--tw-bg-opacity: 1;
47+
background-color: rgba(var(--colors-red-400-rgb), var(--tw-bg-opacity))
48+
}
49+
50+
.bg-red-500 {
51+
--tw-bg-opacity: 1;
52+
background-color: rgba(var(--colors-red-500-rgb), var(--tw-bg-opacity))
53+
}
54+
55+
.bg-red-600 {
56+
background-color: var(--colors-red-500)
57+
}
58+
59+
.bg-gray {
60+
background-color: var(--colors-gray)
61+
}
62+
63+
.bg-green {
64+
background-color: var(--colors-green)
65+
}
66+
67+
.bg-opacity-50 {
68+
--tw-bg-opacity: 0.5
69+
}

‎examples/color-variable-helper/image.png

25.8 KB
Loading

‎examples/color-variable-helper/index.html

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>colorVariable() example using @mertasan/tailwindcss-variables</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body class="bg-gray-50">
10+
<section class="py-20 bg-gray-50">
11+
<div class="container items-center max-w-6xl px-4 px-10 mx-auto sm:px-20 md:px-32 lg:px-16">
12+
<div class="flex flex-wrap items-center -mx-3">
13+
<div class="order-1 w-full px-3 lg:w-1/2 lg:order-0">
14+
<div class="w-full lg:max-w-md">
15+
<h2 class="mb-4 text-3xl font-bold leading-tight tracking-tight sm:text-5xl font-heading">
16+
Tailwindcss Variables</h2>
17+
<p class="mb-4 tracking-tight xl:mb-6 text-2xl sm:text-3xl text-green-500 font-heading leading-tight font-semibold">
18+
[colorVariable() example]</p>
19+
<a href="https://github.com/mertasan/@mertasan/tailwindcss-variables" class="mt-4 tracking-tight xl:mt-6 text-base sm:text-md text-blue-500 hover:text-blue-600 font-heading leading-tight font-medium">
20+
source</a>
21+
</div>
22+
</div>
23+
<div class="w-full px-3 mb-12 lg:w-1/2 order-0 lg:order-1 lg:mb-0">
24+
<img class="mx-auto sm:max-w-sm lg:max-w-full" src="image.png" alt="feature image">
25+
</div>
26+
</div>
27+
</div>
28+
</section>
29+
30+
<div class="hidden">
31+
<div class="text-primary text-opacity-50"></div>
32+
<div class="bg-secondary bg-opacity-50"></div>
33+
<div class="bg-gray bg-opacity-50"></div>
34+
<div class="text-blue text-opacity-50"></div>
35+
<div class="bg-red-400"></div>
36+
<div class="bg-red-500"></div>
37+
<div class="bg-red-600"></div>
38+
<div class="bg-green bg-opacity-50"></div>
39+
<div class="bg-white bg-opacity-50"></div>
40+
</div>
41+
</body>
42+
</html>

‎examples/color-variable-helper/package.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "color-variable-helper",
3+
"version": "1.0.0",
4+
"scripts": {
5+
"build": "env NODE_ENV=production npx tailwindcss build ./tailwind.css -c ./tailwind.config.js -o ./style.css",
6+
"build:clean": "env NODE_ENV=production CLEAN=true npx tailwindcss build ./tailwind.css -c ./tailwind.config.js -o ./clean.css"
7+
},
8+
"devDependencies": {
9+
"@mertasan/tailwindcss-variables": "latest",
10+
"autoprefixer": "^10.2.5",
11+
"postcss": "^8.2.13",
12+
"tailwindcss": "^2.1.2"
13+
},
14+
"license": "MIT"
15+
}

0 commit comments

Comments
 (0)