0
# Miscellaneous Utilities
1

2
Miscellaneous utilities provide essential interactive and visual controls including appearance, outlines, pointer events, cursor styles, user selection, and opacity values.
3

4
## Capabilities
5

6
### Appearance Control
7

8
Remove default browser styling from form elements.
9

10
```scss { .api }
11
.appearance-none { appearance: none; }
12
```
13

14
### Outline Control
15

16
Control element outlines, commonly used for focus states.
17

18
```scss { .api }
19
.outline-none { outline: none; }
20
```
21

22
### Pointer Events
23

24
Control whether elements can be targeted by mouse events.
25

26
```scss { .api }
27
.pointer-events-none { pointer-events: none; }
28
.pointer-events-auto { pointer-events: auto; }
29
```
30

31
### Cursor Styles
32

33
Control the cursor appearance when hovering over elements.
34

35
```scss { .api }
36
.cursor-auto { cursor: auto; }
37
.cursor-pointer { cursor: pointer; }
38
.cursor-wait { cursor: wait; }
39
.cursor-move { cursor: move; }
40
```
41

42
### User Selection
43

44
Control text selection behavior within elements.
45

46
```scss { .api }
47
.select-none { user-select: none; }
48
.select-text { user-select: text; }
49
.select-all { user-select: all; }
50
.select-auto { user-select: auto; }
51
```
52

53
### Opacity Values
54

55
Control element transparency with predefined opacity levels.
56

57
```scss { .api }
58
.opacity-0 { opacity: 0; }
59
.opacity-10 { opacity: 0.1; }
60
.opacity-20 { opacity: 0.2; }
61
.opacity-30 { opacity: 0.3; }
62
.opacity-40 { opacity: 0.4; }
63
.opacity-50 { opacity: 0.5; }
64
.opacity-60 { opacity: 0.6; }
65
.opacity-70 { opacity: 0.7; }
66
.opacity-80 { opacity: 0.8; }
67
.opacity-90 { opacity: 0.9; }
68
.opacity-100 { opacity: 1; }
69
```
70

71
### Element Reset
72

73
Reset all CSS properties to their initial values.
74

75
```scss { .api }
76
.reset { all: unset; }
77
```
78

79
## Usage Examples
80

81
### Custom Form Controls
82

83
```html
84
<!-- Custom dropdown with removed default styling -->
85
<select class="appearance-none cursor-pointer p-2 border-1 border-round">
86
  <option>Select an option</option>
87
  <option>Option 1</option>
88
  <option>Option 2</option>
89
</select>
90

91
<!-- Custom checkbox -->
92
<input type="checkbox" class="appearance-none cursor-pointer">
93
```
94

95
### Interactive Elements
96

97
```html
98
<!-- Clickable card -->
99
<div class="cursor-pointer p-4 border-1 border-round hover:bg-primary-50">
100
  <h3>Clickable Card</h3>
101
  <p>Click anywhere on this card</p>
102
</div>
103

104
<!-- Loading button -->
105
<button class="cursor-wait opacity-50 p-2 bg-primary text-white border-round" disabled>
106
  Loading...
107
</button>
108

109
<!-- Draggable element -->
110
<div class="cursor-move p-3 bg-gray-100 border-round" draggable="true">
111
  Drag me around
112
</div>
113
```
114

115
### Text Selection Control
116

117
```html
118
<!-- Prevent text selection on UI elements -->
119
<div class="select-none cursor-pointer p-2 bg-primary text-white border-round">
120
  Button Text (can't be selected)
121
</div>
122

123
<!-- Force text selection -->
124
<code class="select-all p-2 bg-gray-100 border-round">
125
  npm install primeflex
126
</code>
127

128
<!-- Regular text selection -->
129
<p class="select-text">
130
  This paragraph allows normal text selection behavior.
131
</p>
132
```
133

134
### Overlay and Modal Effects
135

136
```html
137
<!-- Semi-transparent overlay -->
138
<div class="fixed top-0 left-0 w-full h-full bg-black opacity-50 z-4">
139
</div>
140

141
<!-- Disabled overlay content -->
142
<div class="relative">
143
  <div class="opacity-30 pointer-events-none">
144
    <h3>Disabled Content</h3>
145
    <p>This content cannot be interacted with</p>
146
    <button class="p-2 bg-primary text-white border-round">Button</button>
147
  </div>
148
</div>
149
```
150

151
### Focus Management
152

153
```html
154
<!-- Remove default focus outline -->
155
<button class="outline-none focus:shadow-2 p-2 bg-primary text-white border-round">
156
  Custom Focus Style
157
</button>
158

159
<!-- Completely reset element styling -->
160
<div class="reset">
161
  This element has all styles reset
162
</div>
163
```
164

165
## Usage Guidelines
166

167
**Appearance:**
168
- Use `appearance-none` on form controls to create custom styling
169
- Commonly used with select, checkbox, and radio inputs
170

171
**Pointer Events:**
172
- Use `pointer-events-none` to make overlays non-interactive
173
- Use `pointer-events-auto` to restore interactivity
174

175
**Cursor:**
176
- `cursor-pointer` for clickable elements that aren't buttons
177
- `cursor-wait` for loading states
178
- `cursor-move` for draggable elements
179

180
**User Select:**
181
- `select-none` for UI elements and buttons
182
- `select-all` for code snippets and IDs
183
- `select-text` for normal content (default behavior)
184

185
**Opacity:**
186
- Use opacity for fade effects and disabled states
187
- Combine with `pointer-events-none` for truly disabled elements
188

189
## Responsive Variants
190

191
All miscellaneous utilities support responsive variants:
192

193
- `sm:cursor-pointer` - Apply cursor on small screens and up
194
- `md:opacity-50` - Apply opacity on medium screens and up
195
- `lg:select-none` - Apply user select on large screens and up
196
- `xl:pointer-events-auto` - Apply pointer events on extra large screens and up