CDN vs build tool comparison in Tailwind - Practice Questions

Challenge - 5 Problems

🧠 Conceptual

intermediate

Difference in CSS file size when using CDN vs build tool

You include Tailwind CSS in your project using a CDN link versus using a build tool to generate your CSS. Which statement best describes the difference in the CSS file size delivered to the browser?

A The CDN version delivers a smaller CSS file because it is cached globally, while the build tool always generates the full CSS file.

B The build tool delivers a larger CSS file because it adds extra debugging styles not present in the CDN version.

C The CDN version delivers the full Tailwind CSS file, which is large, while the build tool generates a smaller CSS file with only the styles you use.

D Both CDN and build tool deliver the same CSS file size because Tailwind CSS is always fully included.

💡 Hint

Think about how build tools remove unused styles compared to CDN usage.

Using a CDN delivers the entire Tailwind CSS library, which is large. Build tools like PostCSS with Tailwind purge unused styles, resulting in a smaller CSS file.

❓ Architecture

intermediate

Impact on development workflow using CDN vs build tool

Which option best describes how using a CDN versus a build tool affects your development workflow when working with Tailwind CSS?

A Using a CDN requires complex setup and slows development; build tools are plug-and-play and require no configuration.

B Using a CDN allows quick setup with no build step, but limits customization; build tools require setup but enable full customization and faster reloads.

C Both CDN and build tools require the same setup time and offer identical customization options.

D Using a build tool disables hot reloading, while CDN usage enables instant style updates during development.

💡 Hint

Consider setup complexity and customization flexibility.

CDN usage is simple and fast to start but offers limited customization. Build tools require initial setup but allow full control and faster development feedback with hot reloading.

❓ scaling

advanced

Scaling performance for a large user base: CDN vs build tool

Your website using Tailwind CSS expects millions of users worldwide. Which approach scales better for delivering CSS efficiently and why?

A Neither scales well; you must always use inline styles for best performance at scale.

B Using a build tool scales better because it generates smaller CSS files, reducing bandwidth and load times, even if served from your origin server.

C Both scale equally because CDN and build tool CSS files are always the same size and served the same way.

D Using a CDN scales better because it caches the full CSS globally, reducing latency and server load, while build tool CSS must be served from your origin server.

💡 Hint

Think about global caching and delivery networks.

CDNs cache files globally, reducing latency and server load for large user bases. Although build tools produce smaller CSS, if not served via CDN, they can increase origin server load.

❓ tradeoff

advanced

Tradeoff between development speed and production optimization

Which statement best describes the tradeoff between using Tailwind CSS via CDN and using a build tool in terms of development speed and production optimization?

A CDN usage speeds up development but results in larger CSS in production; build tools slow development setup but optimize CSS size for production.

B Build tools speed up development and produce larger CSS files; CDN usage slows development but produces smaller CSS.

C Both CDN and build tools have the same development speed and produce identical CSS sizes in production.

D CDN usage disables CSS caching, while build tools always cache CSS aggressively.

💡 Hint

Consider initial setup time versus final CSS size.

Using a CDN allows quick development without setup but delivers the full CSS file, which is large. Build tools require setup but produce optimized, smaller CSS for production.

❓ estimation

expert

Estimate bandwidth savings using build tool vs CDN for Tailwind CSS

Your website uses Tailwind CSS. The full Tailwind CSS file from CDN is about 3MB uncompressed. Your build tool generates a CSS file of about 150KB after purging unused styles. If you have 1 million monthly visitors, estimate the monthly bandwidth savings by using the build tool CSS instead of the CDN full CSS.

A Approximately 2.85 terabytes saved monthly by using the build tool CSS instead of the full CDN CSS.

B Approximately 450 gigabytes saved monthly by using the build tool CSS instead of the full CDN CSS.

C Approximately 3 terabytes extra bandwidth used monthly by using the build tool CSS instead of the full CDN CSS.

D No bandwidth savings because both CSS files are cached and do not affect monthly bandwidth.

💡 Hint

Calculate difference in file size multiplied by number of visitors.

Difference per visitor: 3MB - 0.15MB = 2.85MB. For 1 million visitors: 2.85MB * 1,000,000 = 2,850,000 MB = 2.85 TB saved monthly.

Practice

1. Which of the following is a key advantage of using Tailwind via CDN instead of a build tool?

easy

A. It produces a smaller, optimized CSS file for production.

B. It automatically removes unused CSS classes.

C. It allows custom configuration of Tailwind classes.

D. It requires no setup and works immediately for quick prototypes.

Solution

1. Step 1: Understand CDN usage context

   Using Tailwind via CDN means you just add a link to your HTML and start using styles immediately without setup.

2. Step 2: Compare with build tool features

   Build tools require setup but optimize CSS size and allow customization, unlike CDN which loads all styles.

3. Final Answer:

   It requires no setup and works immediately for quick prototypes. -> Option D

4. Quick Check:

   CDN = No setup, fast start [OK]

Hint: CDN means no setup, build tool means setup and optimization [OK]

Common Mistakes:

• Thinking CDN optimizes CSS size
• Assuming CDN allows custom config
• Believing CDN removes unused styles

2. Which HTML tag correctly includes Tailwind CSS via CDN?

easy

A.

B.

C.

D.

Solution

1. Step 1: Identify correct CDN inclusion method

   Tailwind CDN is included via a script tag that loads the Tailwind JavaScript to inject styles dynamically.

2. Step 2: Eliminate incorrect tags

   Link tag is for CSS files, but Tailwind CDN uses a script. Style tag cannot have src attribute. Custom tags like <tailwind> are invalid.

3. Final Answer:

   <script src="https://cdn.tailwindcss.com"></script> -> Option A

4. Quick Check:

   Tailwind CDN uses <script> tag [OK]

Hint: Tailwind CDN loads via script tag, not link [OK]

Common Mistakes:

• Using <link> instead of <script>
• Adding src to <style> tag
• Using non-standard HTML tags

3. Given this Tailwind setup using CDN:

<script src="https://cdn.tailwindcss.com"></script>
<div class="text-red-500 p-4">Hello</div>

What will be the color and padding of the div?

medium

A. Text color red, no padding

B. Text color red, padding 1rem

C. Default text color, padding 1rem

D. Default text color, no padding

Solution

1. Step 1: Understand Tailwind CDN effect

   The CDN loads all Tailwind styles, so all utility classes like text-red-500 and p-4 are available.

2. Step 2: Interpret class meanings

   text-red-500 sets text color to a shade of red, p-4 sets padding to 1rem (16px by default).

3. Final Answer:

   Text color red, padding 1rem -> Option B

4. Quick Check:

   text-red-500 + p-4 = red text + 1rem padding [OK]

Hint: CDN loads full styles, so all classes work as expected [OK]

Common Mistakes:

• Assuming CDN misses some classes
• Confusing padding units
• Thinking CDN disables styles

4. A developer uses Tailwind via build tool but notices the CSS file is very large and slow to load. What is the most likely cause?

medium

A. They included Tailwind CSS twice in the HTML.

B. They used the CDN method instead of build tool.

C. They forgot to configure PurgeCSS or content paths to remove unused styles.

D. They used outdated Tailwind version.

Solution

1. Step 1: Understand build tool optimization

   Build tools rely on PurgeCSS or content scanning to remove unused CSS classes and reduce file size.

2. Step 2: Identify cause of large CSS

   If PurgeCSS or content paths are not configured, the build tool includes all Tailwind styles, making the CSS large.

3. Final Answer:

   They forgot to configure PurgeCSS or content paths to remove unused styles. -> Option C

4. Quick Check:

   Missing purge config = large CSS [OK]

Hint: Build tool needs purge config to shrink CSS [OK]

Common Mistakes:

• Confusing CDN with build tool issues
• Assuming version affects CSS size directly
• Ignoring duplicate CSS includes

5. You are designing a scalable web app that uses Tailwind CSS. Which approach is best for production to optimize performance and maintainability?

hard

A. Use a build tool with proper purge configuration to generate optimized CSS.

B. Use inline styles instead of Tailwind classes.

C. Include the entire Tailwind CSS file manually in the project.

D. Use Tailwind via CDN for all pages to avoid build setup.

Solution

1. Step 1: Consider scalability and performance needs

   For scalable apps, loading only needed CSS reduces file size and speeds up loading.

2. Step 2: Evaluate Tailwind methods

   Build tools with purge remove unused styles, creating small CSS files. CDN loads full CSS, which is large and inefficient for production.

3. Step 3: Assess maintainability

   Build tools allow custom config and integration with development workflow, improving maintainability.

4. Final Answer:

   Use a build tool with proper purge configuration to generate optimized CSS. -> Option A

5. Quick Check:

   Build tool + purge = optimized, scalable CSS [OK]

Hint: Build tool with purge is best for production [OK]

Common Mistakes:

• Choosing CDN for production
• Manually including full CSS
• Using inline styles over utility classes