CDN vs build tool comparison in Tailwind - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to include Tailwind CSS using CDN in your HTML.

Tailwind

<head>
  <link href="https://unpkg.com/tailwindcss/dist[1]" rel="stylesheet">
</head>

Drag options to blanks, or click blank then click option'

A/main.css

B/styles.css

C/tailwind.min.css

D/app.css

Attempts:

3 left

💡 Hint

Common Mistakes

Using a local CSS filename instead of the CDN path.

Forgetting to include the .min.css extension.

Using the CDN link requires the path to the minified Tailwind CSS file, which is /tailwind.min.css.

2fill in blank

medium

Complete the code to configure Tailwind CSS build tool to scan your HTML files.

Tailwind

module.exports = {
  content: [[1]],
  theme: {
    extend: {},
  },
  plugins: [],
}

Drag options to blanks, or click blank then click option'

A'./src/**/*.{html,js}'

B'./dist/**/*.{css,js}'

C'./public/**/*.{json,txt}'

D'./assets/**/*.{png,jpg}'

Attempts:

3 left

💡 Hint

Common Mistakes

Including CSS or image files in the content array.

Pointing to the build output folder instead of source files.

The content array should include paths to your source HTML and JS files so Tailwind can purge unused styles.

3fill in blank

hard

Fix the error in this Tailwind build script to generate the CSS file.

Tailwind

npx tailwindcss -i ./src/input.css -o ./dist/output.css [1]

Drag options to blanks, or click blank then click option'

A--watch

B--build

C--run

D--start

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent flags like --build or --run.

Omitting the watch flag when expecting live updates.

The --watch flag tells Tailwind to watch for file changes and rebuild automatically.

4fill in blank

hard

Fill both blanks to describe the main difference between CDN and build tool usage of Tailwind CSS.

Tailwind

CDN usage is [1] and build tool usage is [2].

Drag options to blanks, or click blank then click option'

Aquick to start

Brequires compilation

Cslow to start

Dno compilation needed

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing which method requires compilation.

Saying CDN requires compilation.

Using Tailwind via CDN is quick to start but using a build tool requires compilation for optimized CSS.

5fill in blank

hard

Fill all three blanks to complete the benefits of using a build tool over CDN for Tailwind CSS.

Tailwind

Build tools provide [1], [2], and [3] CSS output.

Drag options to blanks, or click blank then click option'

Asmaller file size

Bcustomization

Cfaster load times

Dautomatic updates

Attempts:

3 left

💡 Hint

Common Mistakes

Including 'automatic updates' as a build tool benefit.

Ignoring customization possibilities.

Build tools allow smaller file sizes, customization of styles, and faster load times compared to CDN usage.

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