Tailwind CSS Assignment – 1

Basics Questions

  1. Create a <div> with Tailwind that centers text both horizontally and vertically.
  2. Add a button styled with Tailwind having blue background, white text, and rounded corners.
  3. Create a responsive heading (h1) with Tailwind that is text-2xl on mobile and text-4xl on desktop.
  4. Apply Tailwind to set a <p> tag with custom font font-mono and text color gray-700.
  5. Create a card layout with shadow-lg, rounded-xl, and p-4.
  6. Add spacing between two <div> elements using space-x-6.
  7. Create a navigation bar with flex, horizontal items, and gap 4.
  8. Apply Tailwind to make a button hover effect: background changes from blue to green.
  9. Make an image responsive using w-full h-auto.
  10. Create a container with fixed width using max-w-md and center it with mx-auto.
  11. Add Tailwind to style text as uppercase, bold, and letter-spaced.
  12. Use Tailwind grid to create a 2-column layout.
  13. Create a circle shape using w-20 h-20 rounded-full bg-red-500.
  14. Add padding (p-6) and margin (m-4) to a div.
  15. Create a Tailwind-styled footer with bg-gray-900 text-white text-center.
  16. Use flex-col and items-center to align child elements vertically.
  17. Create a responsive button that is px-4 py-2 on mobile and px-8 py-4 on desktop.
  18. Add text truncation (truncate) to a long string.
  19. Use Tailwind typography to make text italic underline text-pink-600.
  20. Create a responsive image grid with 3 columns on desktop and 1 column on mobile.

 Intermediate Questions

  1. Add a custom color in tailwind.config.js and apply it to a button.
  2. Configure Tailwind to use Google Font (e.g., Inter) and apply it to headings.
  3. Extend spacing scale in tailwind.config.js and use it on a div’s padding.
  4. Create a responsive navbar with hidden md:flex.
  5. Add a dark mode background using dark:bg-gray-800 and test toggle.
  6. Create a card with hover:scale-105 transition duration-300.
  7. Build a responsive layout with grid-cols-1 sm:grid-cols-2 lg:grid-cols-3.
  8. Add a background gradient using bg-gradient-to-r from-purple-500 to-pink-500.
  9. Style a button with focus:ring-4 ring-offset-2 ring-blue-400.
  10. Create an alert box with border-l-4 border-red-500 bg-red-100 p-4.
  11. Build a profile card with image (rounded-full), name, and description.
  12. Create a sidebar layout with flex and min-h-screen.
  13. Style a form input with border rounded px-4 py-2 focus:outline-none.
  14. Add responsive font sizes with sm:text-sm md:text-base lg:text-lg xl:text-xl.
  15. Create a sticky header using sticky top-0 bg-white shadow-md.
  16. Use divide-y divide-gray-300 to separate list items.
  17. Create a loading spinner using animate-spin border-4 border-t-blue-500.
  18. Add responsive visibility: show a div only on mobile (block md:hidden).
  19. Create a pricing card with title, price, and button styled using Tailwind.
  20. Configure PurgeCSS in Tailwind to remove unused classes and confirm file size reduction.

Advanced Questions

  1. Configure Tailwind with JIT mode and add a dynamic class (e.g., bg-[#1DA1F2]).
  2. Extend Tailwind to add custom breakpoints in tailwind.config.js.
  3. Add custom box shadow in Tailwind config and apply it to a card.
  4. Configure Tailwind to include custom animations and create a bouncing button.
  5. Use @layer components to define a reusable .btn-primary class.
  6. Use @layer utilities to add a custom text utility class.
  7. Add custom font family in Tailwind config and apply to entire body.
  8. Create a JSON config inside tailwind.config.js to define color palette and spacing.
  9. Convert a Bootstrap-styled button to Tailwind classes.
  10. Build a responsive dashboard layout with sidebar, header, and content using Tailwind grid/flex.