Ensure we can use @import 'tailwindcss/...' without node_modules (#…

…8537)

* ensure we can use `@import 'tailwindcss/...'` without node_modules

This is useful if you are using `npx tailwindcs ...` and to prevent
that postcss-import crashes on the tailwind specific imports which we
will replace anyway.

* update changelog

CHANGELOG.md

@@ -30,6 +30,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Allow default ring color to be a function ([#7587](https://github.com/tailwindlabs/tailwindcss/pull/7587))
 - Don't inherit `to` value from parent gradients ([#8489](https://github.com/tailwindlabs/tailwindcss/pull/8489))
 - Remove process dependency from log functions ([#8530](https://github.com/tailwindlabs/tailwindcss/pull/8530))
+- Ensure we can use `@import 'tailwindcss/...'` without node_modules ([#8537](https://github.com/tailwindlabs/tailwindcss/pull/8537))
 
 ### Changed
 

src/cli.js

@@ -568,17 +568,40 @@ async function build() {
 
     tailwindPlugin.postcss = true
 
+    let IMPORT_COMMENT = '__TAILWIND_RESTORE_IMPORT__: '
+
     let [beforePlugins, afterPlugins, postcssOptions] = includePostCss
       ? await loadPostCssPlugins()
       : [
           [
+            (root) => {
+              root.walkAtRules('import', (rule) => {
+                if (rule.params.slice(1).startsWith('tailwindcss/')) {
+                  rule.after(postcss.comment({ text: IMPORT_COMMENT + rule.params }))
+                  rule.remove()
+                }
+              })
+            },
             (() => {
               try {
                 return require('postcss-import')
               } catch {}
 
               return lazyPostcssImport()
             })(),
+            (root) => {
+              root.walkComments((rule) => {
+                if (rule.text.startsWith(IMPORT_COMMENT)) {
+                  rule.after(
+                    postcss.atRule({
+                      name: 'import',
+                      params: rule.text.replace(IMPORT_COMMENT, ''),
+                    })
+                  )
+                  rule.remove()
+                }
+              })
+            },
           ],
           [],
           {},