Repository: tailwindlabs/tailwindcss-jit
Pull request #145 (2021-03-23 14:27:34)

Direct support for @import 'tailwindcss/{layer}' syntax
This PR adds support for writing your layers this way:

```css
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
```

This already works if you are using `postcss-import` or similar, but this makes it work even if you aren't, which makes it a lot easier to document things. Tailwind already supports this on the main branch, bringing this in here as it came up in #143.


Patch:
diff --git a/src/index.js b/src/index.js
index 9863d63..a86dc09 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,6 +3,7 @@ const postcss = require('postcss')
 const evaluateTailwindFunctions = require('tailwindcss/lib/lib/evaluateTailwindFunctions').default
 const substituteScreenAtRules = require('tailwindcss/lib/lib/substituteScreenAtRules').default
 
+const rewriteTailwindImports = require('./lib/rewriteTailwindImports')
 const setupContext = require('./lib/setupContext')
 const removeLayerAtRules = require('./lib/removeLayerAtRules')
 const expandTailwindAtRules = require('./lib/expandTailwindAtRules')
@@ -31,6 +32,8 @@ module.exports = (configOrPath = {}) => {
           })
         }
 
+        rewriteTailwindImports(root)
+
         let context = setupContext(configOrPath)(result, root)
 
         if (context.configPath !== null) {
diff --git a/src/lib/rewriteTailwindImports.js b/src/lib/rewriteTailwindImports.js
new file mode 100644
index 0000000..31a39c9
--- /dev/null
+++ b/src/lib/rewriteTailwindImports.js
@@ -0,0 +1,28 @@
+function rewriteTailwindImports(root) {
+  root.walkAtRules('import', (atRule) => {
+    if (atRule.params === '"tailwindcss/base"' || atRule.params === "'tailwindcss/base'") {
+      atRule.name = 'tailwind'
+      atRule.params = 'base'
+    } else if (
+      atRule.params === '"tailwindcss/components"' ||
+      atRule.params === "'tailwindcss/components'"
+    ) {
+      atRule.name = 'tailwind'
+      atRule.params = 'components'
+    } else if (
+      atRule.params === '"tailwindcss/utilities"' ||
+      atRule.params === "'tailwindcss/utilities'"
+    ) {
+      atRule.name = 'tailwind'
+      atRule.params = 'utilities'
+    } else if (
+      atRule.params === '"tailwindcss/screens"' ||
+      atRule.params === "'tailwindcss/screens'"
+    ) {
+      atRule.name = 'tailwind'
+      atRule.params = 'screens'
+    }
+  })
+}
+
+module.exports = rewriteTailwindImports


Test patch:
diff --git a/tests/12-import-syntax.test.css b/tests/12-import-syntax.test.css
new file mode 100644
index 0000000..030ec8a
--- /dev/null
+++ b/tests/12-import-syntax.test.css
@@ -0,0 +1,52 @@
+* {
+  --tw-shadow: 0 0 #0000;
+  --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgba(59, 130, 246, 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+}
+h1 {
+  font-size: 32px;
+}
+.container {
+  width: 100%;
+}
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+.mt-6 {
+  margin-top: 1.5rem;
+}
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
+}
+@media (min-width: 768px) {
+  .md\:hover\:text-center:hover {
+    text-align: center;
+  }
+}
diff --git a/tests/12-import-syntax.test.html b/tests/12-import-syntax.test.html
new file mode 100644
index 0000000..1971996
--- /dev/null
+++ b/tests/12-import-syntax.test.html
@@ -0,0 +1,5 @@
+<h1>Hello world!</h1>
+<div class="container"></div>
+<div class="mt-6"></div>
+<div class="bg-black"></div>
+<div class="md:hover:text-center"></div>
diff --git a/tests/12-import-syntax.test.js b/tests/12-import-syntax.test.js
new file mode 100644
index 0000000..a0f80c3
--- /dev/null
+++ b/tests/12-import-syntax.test.js
@@ -0,0 +1,38 @@
+const postcss = require('postcss')
+const tailwind = require('../src/index.js')
+const fs = require('fs')
+const path = require('path')
+
+function run(input, config = {}) {
+  return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) })
+}
+
+test('using @import instead of @tailwind', () => {
+  let config = {
+    purge: [path.resolve(__dirname, './12-import-syntax.test.html')],
+    corePlugins: { preflight: false },
+    theme: {},
+    plugins: [
+      function ({ addBase }) {
+        addBase({
+          h1: {
+            fontSize: '32px',
+          },
+        })
+      },
+    ],
+  }
+
+  let css = `
+    @import "tailwindcss/base";
+    @import "tailwindcss/components";
+    @import "tailwindcss/utilities";
+  `
+
+  return run(css, config).then((result) => {
+    let expectedPath = path.resolve(__dirname, './12-import-syntax.test.css')
+    let expected = fs.readFileSync(expectedPath, 'utf8')
+
+    expect(result.css).toMatchCss(expected)
+  })
+})