0
0
Tailwindmarkup~10 mins

CDN vs build tool comparison in Tailwind - Interactive Practice

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Practice - 5 Tasks
Answer the questions below
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.
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.
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.
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.
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.