1
Q
Define utility in Tailwind.
A
A single-purpose class that applies a specific style to an element.
2
Q
What are variants in Tailwind?
A
Modifiers that change styles based on states like hover or focus.
3
Q
True or false: Precedence determines which styles apply when multiple are present.
A
TRUE
Precedence is influenced by specificity and order of styles.
4
Q
Fill in the blank: The cascade refers to the order in which styles are ______.
A
applied
5
Q
What is the role of selectors in CSS?
A
Selectors target HTML elements to apply specific styles.
6
Q
Define specificity.
A
A measurement of how specific a selector is in applying styles.
7
Q
True or false: More specific selectors override less specific ones.
A
TRUE
8
Q
What does inherit mean in CSS?
A
A property value that is passed from a parent element to a child.
9
Q
Fill in the blank: Important can override any style declaration in CSS when used with ______.
A
a property
10
Q
What is a responsive utility in Tailwind?
A
A utility that changes based on the screen size or breakpoint.
11
Q
Define pseudo-class.
A
A special state of an element, like :hover or :focus.
12
Q
True or false: The cascade affects how styles are applied in Tailwind.
A
TRUE
13
Q
What is the purpose of @apply in PostCSS?
A
To apply multiple utility classes within a custom CSS rule.
14
Q
Fill in the blank: The !important rule is used to make a style ______.
A
override others
15
Q
What does responsive design mean?
A
Design that adapts to different screen sizes and orientations.
16
Q
Define media query.
A
A CSS technique to apply styles based on device characteristics.
17
Q
True or false: Tailwind uses a mobile-first approach for its utilities.
A
TRUE
18
Q
What is a custom utility in Tailwind?
A
A user-defined utility class that extends Tailwind’s functionality.
19
Q
Fill in the blank: Cascading stylesheets allow for ______ of styles.
A
layering
20
Q
What is style precedence?
A
The order in which conflicting styles are resolved.
21
Q
Define global styles.
A
Styles that apply across an entire website or application.
22
Q
True or false: Specificity can be calculated using a point system.
A
TRUE
23
Q
What is a utility-first framework?
A
A CSS framework that emphasizes using utility classes for styling.
24
Q
Fill in the blank: Tailwind encourages the use of ______ for rapid UI development.
A
utility classes
25
What does **@layer** do in Tailwind?
It allows grouping of styles into layers for better organization.
26
Define **theme** in Tailwind.
A set of design tokens that define colors, spacing, and more.
27
True or false: Tailwind allows customization of its default theme.
TRUE
28
What is the purpose of **variants** in Tailwind?
To create different styles for various states or conditions.
29
Define **utility** in Tailwind CSS.
A single-purpose class that applies a specific style to an element.
30
What are **variants** in Tailwind CSS?
Modifiers that change styles based on states like hover, focus, or responsive breakpoints.
31
True or false: **Precedence** determines which styles are applied when multiple rules match.
TRUE
## Footnote
Precedence is influenced by specificity and source order.
32
Fill in the blank: **Cascade** refers to the _______ of styles in CSS.
order of application
33
What is the purpose of **selectors** in CSS?
To target HTML elements for styling based on their attributes or position.
34
Define **specificity**.
A measure of how specific a selector is, determining which styles apply.
35
True or false: **Inheritance** allows child elements to inherit styles from their parent.
TRUE
36
What does the **!important** rule do?
It overrides all other styles, regardless of specificity.
37
Fill in the blank: In Tailwind, **responsive** utilities are prefixed with _______.
breakpoint names
38
What is the **default** behavior of CSS regarding inheritance?
Certain properties inherit values from their parent elements by default.
39
Define **pseudo-classes**.
Special selectors that apply styles based on the state of an element, like :hover.
40
True or false: **Utility-first** CSS promotes using many small classes.
TRUE
41
What is a **custom utility** in Tailwind?
A user-defined class that extends Tailwind's default utilities.
42
Fill in the blank: **Tailwind CSS** uses _______ for styling components.
utility classes
43
What is the significance of **source order**?
Styles defined later in the CSS file will override earlier styles with the same specificity.
44
Define **media queries**.
CSS techniques that apply styles based on device characteristics like screen size.
45
True or false: **Utility classes** can be combined to create complex styles.
TRUE
46
What is the **important** modifier in Tailwind?
A utility that applies the !important rule to a class.
47
Fill in the blank: **Variants** can be applied to utilities for _______.
different states
48
What does **@apply** do in Tailwind?
It allows you to use utility classes within your own CSS.
49
Define **custom properties** in CSS.
Variables defined by the user that can be reused throughout the stylesheet.
50
True or false: **Specificity** is calculated based on the number of selectors.
FALSE
## Footnote
Specificity is calculated based on the type of selectors used.
51
What is a **fallback** in CSS?
A secondary style that is applied if the primary style is not supported.
52
Fill in the blank: **Tailwind** uses a _______ approach to styling.
functional
53
What is the role of **global styles**?
Styles that apply to all elements across the entire application.
54
Define **shorthand properties**.
CSS properties that allow multiple values to be set in a single declaration.
55
True or false: **Inline styles** have higher specificity than external styles.
TRUE
56
What is the purpose of **CSS resets**?
To normalize styles across different browsers for consistent rendering.
57
Fill in the blank: **Tailwind's** configuration file is named _______.
tailwind.config.js
58
What does **responsive design** aim to achieve?
To ensure web content looks good on all devices and screen sizes.
59
Define **utility-first** CSS.
A methodology that emphasizes using single-purpose utility classes for styling.
60
True or false: **Cascading** styles can lead to unexpected results if not managed.
TRUE
61
What is a **style guide**?
A document that outlines the design standards and styles for a project.
62
Fill in the blank: **Tailwind** allows for _______ theming through configuration.
custom
63
What is the **box model**?
A model that describes the rectangular boxes generated for elements in the document tree.
64
Define **flexbox**.
A CSS layout model that allows responsive alignment of items in a container.
65
True or false: **Grid** layout is more complex than flexbox.
TRUE
66
What does **z-index** control?
The stacking order of overlapping elements on the page.
67
Fill in the blank: **Tailwind** uses _______ to manage responsive styles.
breakpoints
68
What is the purpose of **pseudo-elements**?
To style specific parts of an element, like the first line or first letter.
69
Define **transition** in CSS.
A way to create smooth changes between property values over time.
70
True or false: **Tailwind** can be used with any CSS framework.
TRUE
71
What is a **component** in Tailwind?
A reusable piece of UI that can be styled with utility classes.
72
Fill in the blank: **Custom utilities** can be defined in the _______ file.
tailwind.config.js
73
What does **@screen** do in Tailwind?
It allows you to define styles for specific breakpoints.
74
Define **media feature**.
A condition used in media queries to apply styles based on device characteristics.
75
True or false: **Utility classes** can be combined with custom CSS.
TRUE
76
What is the purpose of **arbitrary values** in Tailwind?
To allow custom values for utilities that are not predefined.
77
Fill in the blank: **Tailwind** promotes a _______ approach to styling components.
declarative
78
What is a **theme** in Tailwind?
A set of design tokens that define colors, spacing, and other styles.
79
Define **breakpoints**.
Specific screen widths where responsive styles change.
80
True or false: **Tailwind** requires writing custom CSS for every style.
FALSE
## Footnote
Tailwind provides a comprehensive set of utility classes.
81
What is the **purpose** of Tailwind's **purge** feature?
To remove unused CSS classes from the final build.
82
Fill in the blank: **Tailwind** uses _______ to generate utility classes.
PostCSS
83
What does **@layer** do in Tailwind?
It allows you to define styles in different layers for better organization.
84
Define **aspect ratio**.
The ratio of width to height of an element.
85
True or false: **Tailwind** supports dark mode styles.
TRUE
86
What is a **variant group** in Tailwind?
A collection of variants that can be applied together to a utility.
87
Fill in the blank: **Tailwind's** **JIT** mode stands for _______.
Just-In-Time
88
What is the **purpose** of Tailwind's **spacing scale**?
To provide consistent spacing values across the design.
89
Define **hover state**.
A visual change that occurs when a user hovers over an element.
90
True or false: **Tailwind** can be used with JavaScript frameworks.
TRUE
91
What does **@variants** do in Tailwind?
It allows you to create custom variants for utilities.
92
Fill in the blank: **Tailwind** encourages a _______ approach to building UIs.
component-based
93
What is the **purpose** of Tailwind's **colors** utility?
To apply color styles to elements easily.
94
Define **grid template areas**.
A way to define named areas in a grid layout for better organization.
95
True or false: **Tailwind** requires extensive CSS knowledge to use.
FALSE
## Footnote
Tailwind is designed to be user-friendly for beginners.
96
What is a **responsive utility**?
A utility class that applies styles based on the screen size.
97
Fill in the blank: **Tailwind** provides a _______ for customizing styles.
configuration file
98
What is the **purpose** of Tailwind's **typography** utility?
To apply consistent text styles across the application.
99
Define **transition duration**.
The length of time a transition effect takes to complete.
100
True or false: **Tailwind** is a CSS framework.
TRUE
101
What does **@import** do in CSS?
It allows you to include styles from other CSS files.
102
Fill in the blank: **Tailwind** uses _______ for managing design tokens.
theme configuration
103
What is the **purpose** of Tailwind's **border** utilities?
To apply border styles and widths to elements.
104
Define **focus state**.
A visual change that occurs when an element is focused.
105
True or false: **Tailwind** allows for easy customization of styles.
TRUE
106
What is the **purpose** of Tailwind's **shadow** utilities?
To apply shadow effects to elements.
107
Fill in the blank: **Tailwind** can be integrated with _______ for better development.
build tools
108
What does **@tailwind** do in Tailwind?
It includes Tailwind's base, components, or utilities styles.
109
Define **opacity** in CSS.
A property that controls the transparency level of an element.
110
True or false: **Tailwind** supports custom fonts.
TRUE
111
What is the **purpose** of Tailwind's **flex** utilities?
To apply flexbox properties to elements.
112
Fill in the blank: **Tailwind** provides a _______ for defining custom styles.
plugin system
113
What does **@layer utilities** do in Tailwind?
It allows you to define custom utility classes in a specific layer.
114
Define **visibility** in CSS.
A property that controls whether an element is visible or hidden.
115
True or false: **Tailwind** can be used for building responsive designs.
TRUE
116
What is the **purpose** of Tailwind's **spacing** utilities?
To apply margin and padding values to elements.
117
Fill in the blank: **Tailwind** uses a _______ for managing responsive styles.
mobile-first approach
118
Define **text alignment** in CSS.
A property that controls the horizontal alignment of text within an element.
119
True or false: **Tailwind** allows for easy integration with JavaScript frameworks.
TRUE
120
What is the **purpose** of Tailwind's **grid** utilities?
To apply grid layout properties to elements.
121
Fill in the blank: **Tailwind** can be configured to use _______ for colors.
custom palettes
122
Define **aspect ratio** in CSS.
The ratio of width to height of an element.
123
True or false: **Tailwind** provides built-in support for animations.
TRUE
124
What is the **purpose** of Tailwind's **transition** utilities?
To apply transition effects to elements.
125
Fill in the blank: **Tailwind** supports _______ for defining custom styles.
plugins
126
What does **@tailwind utilities** do in Tailwind?
It includes all of Tailwind's utility classes.
127
Define **hover state** in CSS.
A visual change that occurs when a user hovers over an element.
128
True or false: **Tailwind** is a utility-first CSS framework.
TRUE
129
What is the **purpose** of Tailwind's **color** utilities?
To apply color styles to elements easily.
130
Define **focus state** in CSS.
A visual change that occurs when an element is focused.
