Show warnings for invalid content config (#7065)

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Added
+
+- Show warnings for invalid content config ([#7065](https://github.com/tailwindlabs/tailwindcss/pull/7065))
 
 ## [3.0.13] - 2022-01-11
 

src/lib/expandTailwindAtRules.js

@@ -2,6 +2,7 @@ import LRU from 'quick-lru'
 import * as sharedState from './sharedState'
 import { generateRules } from './generateRules'
 import bigSign from '../util/bigSign'
+import log from '../util/log'
 import cloneNodes from '../util/cloneNodes'
 import { defaultExtractor } from './defaultExtractor'
 
@@ -227,6 +228,14 @@ export default function expandTailwindAtRules(context) {
       root.append(cloneNodes([...screenNodes], root.source))
     }
 
+    // If we've got a utility layer and no utilities are generated there's likely something wrong
+    // TODO: Detect utility variants only
+    if (layerNodes.utilities && utilityNodes.size === 0 && screenNodes.size === 0) {
+      log.warn('content-problems', [
+        'No utilities were generated there is likely a problem with the `content` key in the tailwind config. For more information see the documentation: https://tailwindcss.com/docs/content-configuration',
+      ])
+    }
+
     // ---
 
     if (env.DEBUG) {

src/util/normalizeConfig.js

@@ -258,5 +258,11 @@ export function normalizeConfig(config) {
     }
   }
 
+  if (config.content.files.length === 0) {
+    log.warn('content-problems', [
+      'The `content` key is missing or empty. Please populate the content key as Tailwind generates utilities on-demand based on the files that use them. For more information see the documentation: https://tailwindcss.com/docs/content-configuration',
+    ])
+  }
+
   return config
 }

tests/warnings.test.js

@@ -0,0 +1,74 @@
+import { html, run, css } from './util/run'
+
+let warn
+
+beforeEach(() => {
+  let log = require('../src/util/log')
+  warn = jest.spyOn(log.default, 'warn')
+})
+
+afterEach(() => {
+  warn.mockClear()
+})
+
+test('it warns when there is no content key', async () => {
+  let config = {
+    corePlugins: { preflight: false },
+  }
+
+  let input = css`
+    @tailwind base;
+  `
+
+  await run(input, config)
+
+  expect(warn).toHaveBeenCalledTimes(1)
+  expect(warn.mock.calls.map((x) => x[0])).toEqual(['content-problems'])
+})
+
+test('it warns when there is an empty content key', async () => {
+  let config = {
+    content: [],
+    corePlugins: { preflight: false },
+  }
+
+  let input = css`
+    @tailwind base;
+  `
+
+  await run(input, config)
+
+  expect(warn).toHaveBeenCalledTimes(1)
+  expect(warn.mock.calls.map((x) => x[0])).toEqual(['content-problems'])
+})
+
+test('it warns when there are no utilities generated', async () => {
+  let config = {
+    content: [{ raw: html`nothing here matching a utility` }],
+    corePlugins: { preflight: false },
+  }
+
+  let input = css`
+    @tailwind utilities;
+  `
+
+  await run(input, config)
+
+  expect(warn).toHaveBeenCalledTimes(1)
+  expect(warn.mock.calls.map((x) => x[0])).toEqual(['content-problems'])
+})
+
+it('warnings are not thrown when only variant utilities are generated', async () => {
+  let config = {
+    content: [{ raw: html`<div class="sm:underline"></div>` }],
+    corePlugins: { preflight: false },
+  }
+
+  let input = css`
+    @tailwind utilities;
+  `
+
+  await run(input, config)
+
+  expect(warn).toHaveBeenCalledTimes(0)
+})