This repository has been archived by the owner on Sep 7, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
153 lines (151 loc) · 8.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>CSS Prefix-er for Tailwind UI Components</title>
<meta name="description" content="Easily add a Tailwind CSS prefix and modify the primary color in Tailwind UI components">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.js" defer></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css">
<body class="bg-cool-gray-100">
<div class="p-8">
<h1 class="text-3xl text-gray-700 leading-8">CSS Prefix-<em>er</em> for <a class="underline font-medium text-gray-900" href="https://tailwindui.com">Tailwind UI</a> Components</h1>
<p class="mt-3 text-gray-600">Add your CSS prefix, select a primary color, paste the Tailwind UI component HTML, then copy the updated HTML to use in your project.</p>
<div class="my-8" x-data="component()">
<div class="mt-4">
<label for="prefix" class="block text-sm font-bold leading-8 text-gray-700">CSS Prefix</label>
<div class="mt-1 relative rounded-md shadow-sm">
<input id="prefix" type="text" @keyup="process" x-model="prefix" class="form-input block w-full sm:text-sm sm:leading-5" placeholder="" />
</div>
</div>
<div class="mt-4">
<label for="primary" class="block text-sm font-bold leading-8 text-gray-700">Primary Color</label>
<select
id="primary"
@change="$nextTick(() => process())"
x-model="primary"
class="mt-1 block form-select w-full py-2 px-3 py-0 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5"
>
<option value="blue">Blue</option>
<option value="gray">Gray</option>
<option value="green">Green</option>
<option value="indigo">Indigo</option>
<option value="orange">Orange</option>
<option value="pink">Pink</option>
<option value="purple">Purple</option>
<option value="red">Red</option>
<option value="teal">Teal</option>
<option value="yellow">Yellow</option>
</select>
</div>
<div class="mt-4">
<div class="flex justify-between">
<label for="input" class="block text-sm leading-8 font-bold text-gray-700">
Component HTML
</label>
<button
type="button"
@click="input = ''; process();"
class="ml-3 text-gray-400 hover:text-gray-500"
x-show="input !== ''"
>
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-6 h-6"><path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
</button>
</div>
<div class="rounded-md shadow-sm">
<textarea
id="input" rows="4"
x-model="input"
@keyup="process"
class="form-textarea mt-1 block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5"></textarea>
</div>
</div>
<div class="mt-4">
<div class="flex justify-between">
<label for="output" class="block text-sm leading-8 font-bold text-gray-700">
Prefixed Component HTML
</label>
<button
type="button"
@click="$refs.output.select(); document.execCommand('copy')"
x-show="output !== ''"
class="ml-3 text-blue-600 hover:text-blue-500"
>
<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
</svg>
</button>
</div>
<div class="rounded-md shadow-sm">
<textarea
id="output"
rows="4"
x-ref="output"
x-model="output"
class="form-textarea mt-1 block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5"></textarea>
</div>
</div>
</div>
</div>
<div class="px-8 flex justify-center">
<p>
<a class="text-teal-600" href="https://twitter.com/getJReviews">Alejandro Schmeichler</a> • Built with <a class="text-teal-600" href="https://tailwindui.com/">Tailwind UI</a> and <a class="text-teal-600" href="https://github.com/alpinejs/alpine">Alpine JS</a> • <a class="text-teal-600" href="https://github.com/clickfwd/css-prefixer-tailwindui/">Open in Github</a>
</p>
</div>
<script>
function component() {
return {
input: '',
output: '',
prefix: '',
primary: 'indigo',
process() {
if (!this.input) {
this.output = ''
return
}
let div = document.createElement('div')
div.innerHTML = this.input
let els = div.querySelectorAll('*')
for (let index1 = 0; index1 < els.length; index1++) {
let node = els[index1]
let newClasses = []
for (let index = 0; index < node.classList.length; index++) {
newClasses.push(this.prefixClass(node.classList[index]))
}
if ( newClasses.length ) {
if (node instanceof SVGElement) {
node.setAttribute('class', newClasses.join(' '))
} else {
node.className = newClasses.join(' ')
}
}
this.transitionClasses(node)
}
this.output = div.innerHTML
},
transitionClasses(node) {
node.getAttributeNames().forEach( attribute => {
if ( attribute.match('x-transition') ) {
const classList = node.getAttribute(attribute).split(' ')
let newClasses = []
classList.forEach( className => newClasses.push(this.prefixClass(className)) )
node.setAttribute(attribute, newClasses.join(' '))
}
})
},
prefixClass(className) {
className = className.replace('indigo', this.primary)
let match = className.match(/([a-z].*):(.*)/)
const prefix = this.prefix ? this.prefix + '-' : ''
if (match) {
return `${match[1]}:${prefix}${match[2]}`
}
return `${prefix}${className}`
}
}
}
</script>
</body>
</html>