Tailwindcss-module: TailwindλŠ” ν…œν”Œλ¦Ώ κ²½λ‘œκ°€ μ œκ³΅λ˜μ§€ μ•Šμ•˜κΈ° λ•Œλ¬Έμ— μ‚¬μš©ν•˜μ§€ μ•ŠλŠ” μŠ€νƒ€μΌμ„ μ œκ±°ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

에 λ§Œλ“  2020λ…„ 05μ›” 20일  Β·  8μ½”λ©˜νŠΈ  Β·  좜처: nuxt-community/tailwindcss-module

μ•ˆλ…•ν•˜μ„Έμš”,

λ‚΄ nuxt 2.12.2 ν”„λ‘œμ νŠΈλ₯Ό λΉŒλ“œ ν•  λ•Œ λ‹€μŒ κ²½κ³ κ°€ ν‘œμ‹œλ©λ‹ˆλ‹€.

TailwindλŠ” ν…œν”Œλ¦Ώ κ²½λ‘œκ°€ μ œκ³΅λ˜μ§€ μ•Šμ•˜κΈ° λ•Œλ¬Έμ— μ‚¬μš©ν•˜μ§€ μ•ŠλŠ” μŠ€νƒ€μΌμ„ μ œκ±°ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

ν•˜μ§€λ§Œ CSSκ°€ 제거 된 것 κ°™μŠ΅λ‹ˆλ‹€. λ‹¨μ„œκ°€ μžˆμŠ΅λ‹ˆκΉŒ?

question wontfix

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

이제 @Atinux κ°€ μƒˆ tailwind.config.js 에 ꢌμž₯ 섀정을 λ„£λŠ” 것을 λ³΄μ•˜μŠ΅λ‹ˆλ‹€.
λ¬Έμ œλŠ” ν˜„μž¬ ν”„λ‘œμ νŠΈμ— λŒ€ν•΄ μ—…λ°μ΄νŠΈλ˜μ§€ μ•Šμ•˜λ‹€λŠ” κ²ƒμž…λ‹ˆλ‹€.
ꢌμž₯ν•˜λŠ” 섀정은 λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

// tailwind.config.js
module.exports = {
  /* ... your actual config */,
  purge: {
    // Learn more on https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
    enabled: process.env.NODE_ENV === 'production',
    content: [
      'components/**/*.vue',
      'layouts/**/*.vue',
      'pages/**/*.vue',
      'plugins/**/*.js',
      'nuxt.config.js'
    ]
  }
}

λͺ¨λ“  8 λŒ“κΈ€

λ„€, 기본적으둜 μ•„λ‹™λ‹ˆλ‹€.
제 κ²½μš°μ—λŠ” μ μ ˆν•©λ‹ˆλ‹€.

module.exports = {
  purge: [
    "./pages/**/*.vue", 
    "./components/**/*.vue", 
    "./plugins/**/*.vue",
    "./static/**/*.vue",
    "./store/**/*.vue"
  ],
  theme: {},
  variants: {},
  plugins: []
};

λ‚˜μ—κ²Œλ„ 일어 났고 @Triloworld μ†”λ£¨μ…˜μœΌλ‘œ μž‘μ—…ν–ˆμŠ΅λ‹ˆλ‹€. ν•˜μ§€λ§Œ 기본적으둜 μΆ”κ°€λ˜μ–΄μ•Όν•œλ‹€κ³  μƒκ°ν•©λ‹ˆλ‹€ !!

@Triloworld 의 μ†”λ£¨μ…˜μ΄ 잘 μž‘λ™ν•˜λŠ” 것 κ°™μŠ΅λ‹ˆλ‹€! 감사!

이제 @Atinux κ°€ μƒˆ tailwind.config.js 에 ꢌμž₯ 섀정을 λ„£λŠ” 것을 λ³΄μ•˜μŠ΅λ‹ˆλ‹€.
λ¬Έμ œλŠ” ν˜„μž¬ ν”„λ‘œμ νŠΈμ— λŒ€ν•΄ μ—…λ°μ΄νŠΈλ˜μ§€ μ•Šμ•˜λ‹€λŠ” κ²ƒμž…λ‹ˆλ‹€.
ꢌμž₯ν•˜λŠ” 섀정은 λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

// tailwind.config.js
module.exports = {
  /* ... your actual config */,
  purge: {
    // Learn more on https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
    enabled: process.env.NODE_ENV === 'production',
    content: [
      'components/**/*.vue',
      'layouts/**/*.vue',
      'pages/**/*.vue',
      'plugins/**/*.js',
      'nuxt.config.js'
    ]
  }
}

κ°μ‚¬ν•©λ‹ˆλ‹€ @santicros , κ·€ν•˜μ˜ ꡬ성은 μ €λ₯Ό 많이 λ„μ™€μ€λ‹ˆλ‹€. @Triloworld μ†”λ£¨μ…˜μœΌλ‘œ λΉŒλ“œν•˜κ±°λ‚˜ 생성 ν•  λ•Œ md:* 와 같은 쀑단 점이 컴파일 된 νŒŒμΌμ— λ‚˜νƒ€λ‚˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

@dbarjs κ°€ md:* 으둜 λ‚΄ λμ—μ„œ 같은 문제둜 μ‹€ν–‰λ©λ‹ˆλ‹€. tailwind.config.js 및 nuxt.config.jsμ—μ„œ 제거 λΉ„ν™œμ„±ν™”

이 λͺ¨λ“ˆμ€ enabled 에 λŒ€ν•œ ν”„λ‘œλ•μ…˜ ν”Œλž˜κ·Έλ₯Ό μΆ”κ°€ ν•  ν•„μš”κ°€ μ—†λ‹€κ³  μƒκ°ν•©λ‹ˆλ‹€.

Tailwind λ¬Έμ„œ 에 λ”°λ₯΄λ©΄ μ œκ±°λŠ” ν”„λ‘œλ•μ…˜μ—μ„œλ§Œ μ‹€ν–‰λ˜μ–΄μ•Όν•˜λ©° enabled 이 μˆ˜λ™ μž¬μ •μ˜μž„μ„ λͺ…μ‹œν•©λ‹ˆλ‹€. λ”°λΌμ„œμ΄ λͺ¨λ“ˆμ€ 기본적으둜 μˆ˜λ™ μ˜€λ²„λΌμ΄λ“œλ₯Ό μš”κ΅¬ν•˜μ§€ μ•Šμ•„μ•Όν•©λ‹ˆλ‹€.

image

이 λ¬Έμ œλŠ” 졜근 ν™œλ™μ΄ μ—†μ—ˆκΈ° λ•Œλ¬Έμ— μžλ™μœΌλ‘œ 였래된 κ²ƒμœΌλ‘œ ν‘œμ‹œλ˜μ—ˆμŠ΅λ‹ˆλ‹€. 더 이상 ν™œλ™μ΄ λ°œμƒν•˜μ§€ μ•ŠμœΌλ©΄ νμ‡„λ©λ‹ˆλ‹€. κ·€ν•˜μ˜ 기여에 κ°μ‚¬λ“œλ¦½λ‹ˆλ‹€.

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰