Quiz for Tailwind CSS with React

Q1: What is Tailwind CSS?

A. A utility-first CSS framework B. A JavaScript library C. A React component library D. A CSS preprocessor

Q2: How do you install Tailwind CSS in a React project?

A. Using npm or yarn and configuring PostCSS B. Just import a CSS file C. Using CDN only D. By adding script tags

Q3: Which file do you configure to customize Tailwind in React?

A. tailwind.config.js B. package.json C. webpack.config.js D. index.js

Q4: How do you add Tailwind classes to React elements?

A. Using className attribute B. Using style attribute C. Using id attribute D. Using inline styles

Q5: What utility class applies margin of 4 units in Tailwind?

A. m-4 B. margin-4 C. mg-4 D. m4

Q6: How do you apply responsive design in Tailwind with React?

A. Using prefixes like sm:, md:, lg: B. Using media queries in CSS C. Using inline styles D. Using JavaScript only

Q7: Which Tailwind class sets text color to red?

A. text-red-500 B. color-red C. text-danger D. red-text

Q8: How can you add custom colors in Tailwind?

A. By editing tailwind.config.js colors section B. By editing index.css C. By inline styles D. By className only

Q9: Is Tailwind CSS compatible with React’s dynamic className usage?

A. Yes, className can be dynamic B. No, static only C. Only strings D. Only arrays

Q10: What is the main advantage of using Tailwind CSS in React?

A. Rapid UI styling with utility classes B. It replaces JavaScript C. It replaces React D. It disables CSS

Q11: Can you use Tailwind CSS with styled-components?

A. Yes, but generally used separately B. No C. Only with CSS Modules D. Only with inline styles

Q12: How do you purge unused CSS in Tailwind for React?

A. Configure purge option in tailwind.config.js B. Remove CSS manually C. Use CSS Modules D. Use inline styles

Q13: What tool does Tailwind use to remove unused styles?

A. PurgeCSS B. Webpack C. Babel D. ESLint

Q14: Which command runs the React app with Tailwind styles?

A. npm start B. npm run tailwind C. tailwind start D. react-scripts start

Q15: What is the recommended way to add global styles in Tailwind?

A. Using @tailwind directives in CSS B. Using inline styles C. Using CSS Modules D. Using JS styles

Q16: Can Tailwind CSS be combined with Sass or Less in React?

A. Yes, with proper build configuration B. No, not supported C. Only with CSS Modules D. Only with inline styles

Q17: Which of the following is a drawback of Tailwind CSS?

A. Learning curve due to many utility classes B. No flexibility in styling C. Large CSS bundle always D. Only for small projects

Q18: How does Tailwind handle hover states?

A. Using hover: prefix before utility classes B. Using :hover in CSS C. Using inline styles D. Not supported

Q19: Is it necessary to write custom CSS when using Tailwind?

A. Not always, but possible for special cases B. Always required C. Not allowed D. Only for animations