Preset sharing across projects in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import a Tailwind preset in your tailwind.config.js file.

Tailwind

module.exports = {
  presets: [require([1])],
  theme: {
    extend: {},
  },
  plugins: [],
}

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

A'./tailwind.css'

B'tailwindcss/defaultTheme'

C'./styles.css'

D'./my-preset.js'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a CSS file path instead of a JS preset file.

Forgetting to wrap the path in quotes.

Not using require() to import the preset.

You import your custom preset by requiring its path as a string inside the presets array.

2fill in blank

medium

Complete the code to export a Tailwind preset configuration in my-preset.js.

Tailwind

module.exports = {
  theme: {
    extend: {
      colors: [1],
    },
  },
};

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

A'primary: #1da1f2, secondary: #14171a'

B['primary', '#1da1f2']

C{ primary: '#1da1f2', secondary: '#14171a' }

D['#1da1f2', '#14171a']

Attempts:

3 left

💡 Hint

Common Mistakes

Using arrays instead of objects for colors.

Writing colors as a string instead of an object.

Missing curly braces around the color definitions.

The colors property expects an object mapping color names to hex codes.

3fill in blank

hard

Fix the error in the preset export by completing the missing keyword.

Tailwind

[1] tailwindPreset = {
  theme: {
    extend: {
      spacing: {
        '72': '18rem',
      },
    },
  },
};

module.exports = tailwindPreset;

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

Afunction

Bconst

Cvar

Dlet

Attempts:

3 left

💡 Hint

Common Mistakes

Using function instead of a variable declaration.

Using var or let when const is preferred.

Use const to declare the preset object to prevent reassignment.

4fill in blank

hard

Fill both blanks to extend the Tailwind theme with custom font family and font size.

Tailwind

module.exports = {
  presets: [require('./my-preset.js')],
  theme: {
    extend: {
      fontFamily: [1],
      fontSize: [2],
    },
  },
  plugins: [],
};

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

A{ sans: ['Helvetica', 'Arial', 'sans-serif'] }

B{ base: '16px', lg: '20px' }

C{ base: '1rem', lg: '1.25rem' }

D['Helvetica', 'Arial']

Attempts:

3 left

💡 Hint

Common Mistakes

Using arrays directly for fontFamily instead of inside an object.

Using pixel units for fontSize instead of rem units.

Mixing up fontFamily and fontSize formats.

Font families are objects mapping names to arrays of fonts. Font sizes are objects mapping names to rem values.

5fill in blank

hard

Fill all three blanks to create a preset that adds a custom color, spacing, and a plugin.

Tailwind

const myPreset = {
  theme: {
    extend: {
      colors: [1],
      spacing: [2],
    },
  },
  plugins: [[3]],
};

module.exports = myPreset;

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

A{ brandBlue: '#0d6efd' }

B{ '128': '32rem' }

Crequire('@tailwindcss/forms')

D['@tailwindcss/typography']

Attempts:

3 left

💡 Hint

Common Mistakes

Using arrays instead of objects for colors or spacing.

Adding plugin names as strings instead of using require().

Forgetting to export the preset object.

Colors and spacing are objects with key-value pairs. Plugins are imported with require().