feat!: upgrade to tailwindcss@2 (#270)

Author: RomainLanz

example/components/CallToAction.vue

@@ -0,0 +1,23 @@
+<template>
+  <!-- This example requires Tailwind CSS v2.0+ -->
+  <div class="bg-gray-50">
+    <div class="px-4 py-12 mx-auto max-w-7xl sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
+      <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
+        <span class="block">Ready to dive in?</span>
+        <span class="block text-indigo-600">Start your free trial today.</span>
+      </h2>
+      <div class="flex mt-8 lg:mt-0 lg:flex-shrink-0">
+        <div class="inline-flex rounded-md shadow">
+          <a href="#" class="inline-flex items-center justify-center px-5 py-3 text-base font-medium text-white bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-700">
+            Get started
+          </a>
+        </div>
+        <div class="inline-flex ml-3 rounded-md shadow">
+          <a href="#" class="inline-flex items-center justify-center px-5 py-3 text-base font-medium text-indigo-600 bg-white border border-transparent rounded-md hover:bg-indigo-50">
+            Learn more
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

example/nuxt.config.js

@@ -4,6 +4,7 @@ export default {
   buildModules: [
     tailwindModule
   ],
+  components: true,
   tailwindcss: {
     exposeConfig: true
   }

example/pages/index.vue

@@ -1,28 +1,10 @@
 <template>
   <div>
-    <div class="banner">
-      <div
-        class="p-2 bg-indigo-800 items-center text-indigo-100 leading-none lg:rounded-full flex lg:inline-flex"
-        role="alert"
-      >
-        <span
-          class="flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3"
-        >New</span>
-        <span
-          class="font-semibold mr-2 text-left flex-auto"
-        >Get the coolest t-shirts from our brand new store</span>
-        <svg
-          class="fill-current opacity-75 h-4 w-4"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-        >
-          <path
-            d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"
-          />
-        </svg>
-      </div>
+    <div>
+      <CallToAction />
     </div>
-    <pre>{{ tailwindConfig }}</pre>
+
+    <pre class="p-4 m-4 bg-gray-100 rounded">{{ tailwindConfig }}</pre>
   </div>
 </template>
 
@@ -35,18 +17,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.banner {
-  @apply bg-indigo-900 text-center py-4;
-  @screen lg {
-    @apply bg-yellow-500;
-  }
-  &:hover {
-    @apply bg-indigo-800;
-    @screen lg {
-      @apply bg-yellow-600;
-    }
-  }
-}
-</style>

lib/files/tailwind.config.js

@@ -1,16 +1,18 @@
+// Learn more at https://tailwindcss.com/docs/configuration
 module.exports = ({ dev, rootDir, srcDir }) => ({
-  theme: {},
-  variants: {},
-  plugins: [],
-  purge: {
-    // Learn more on https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
-    enabled: !dev,
-    content: [
-      `${srcDir}/components/**/*.{vue,js}`,
-      `${srcDir}/layouts/**/*.vue`,
-      `${srcDir}/pages/**/*.vue`,
-      `${srcDir}/plugins/**/*.{js,ts}`,
-      `${rootDir}/nuxt.config.{js,ts}`
-    ]
-  }
+  purge: [
+    `${srcDir}/components/**/*.{vue,js}`,
+    `${srcDir}/layouts/**/*.vue`,
+    `${srcDir}/pages/**/*.vue`,
+    `${srcDir}/plugins/**/*.{js,ts}`,
+    `${rootDir}/nuxt.config.{js,ts}`
+  ],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {}
+  },
+  variants: {
+    extend: {}
+  },
+  plugins: []
 })

lib/module.js

@@ -21,6 +21,9 @@ module.exports = async function (moduleOptions) {
   const configPath = nuxt.resolver.resolveAlias(options.configPath)
   const cssPath = nuxt.resolver.resolveAlias(options.cssPath)
 
+  // Require postcss@8
+  await this.addModule('nuxt-postcss8')
+
   // Include CSS file in project css
   if (await pathExists(cssPath)) {
     logger.info(`Using Tailwind CSS from ~/${relative(nuxt.options.srcDir, cssPath)}`)

package.json

@@ -24,13 +24,16 @@
     "lib"
   ],
   "dependencies": {
+    "autoprefixer": "^10.0.2",
     "chalk": "^4.1.0",
     "clear-module": "^4.1.1",
     "consola": "^2.15.0",
     "defu": "^3.2.2",
     "fs-extra": "^9.0.1",
-    "tailwind-config-viewer": "^1.4.0",
-    "tailwindcss": "^1.9.6",
+    "nuxt-postcss8": "^1.0.1",
+    "postcss": "^8.0.9",
+    "tailwind-config-viewer": "^1.5.0",
+    "tailwindcss": "^2.0.3",
     "ufo": "^0.6.6"
   },
   "devDependencies": {
@@ -53,7 +56,7 @@
     "eslint-plugin-vue": "^7.4.1",
     "husky": "^5.1.3",
     "jest": "^26.6.3",
-    "nuxt": "^2.14.12",
+    "nuxt": "^2.15.2",
     "standard-version": "^9.1.0"
   }
 }

test/config.test.js

@@ -15,6 +15,7 @@ describe('config', () => {
       buildModules: [
         tailwindModule
       ],
+      components: true,
       tailwindcss: {
         exposeConfig: true,
         configPath: join(__dirname, 'mock', 'tailwind.config.js'),
@@ -35,7 +36,7 @@ describe('config', () => {
 
   test('render', async () => {
     const html = await get('/')
-    expect(html).toContain('Get the coolest t-shirts from our brand new store')
+    expect(html).toContain('Ready to dive in?')
     expect(html).not.toContain('.bg-pink-700')
   })
 
@@ -50,7 +51,7 @@ describe('config', () => {
   })
 
   test('merged the tailwind default config', () => {
-    expect(nuxt.options.build.postcss.plugins.tailwindcss.purge.content).toContain(`${rootDir}/nuxt.config.{js,ts}`)
-    expect(nuxt.options.build.postcss.plugins.tailwindcss.purge.content).toContain('content/**/*.md')
+    expect(nuxt.options.build.postcss.plugins.tailwindcss.purge).toContain(`${rootDir}/nuxt.config.{js,ts}`)
+    expect(nuxt.options.build.postcss.plugins.tailwindcss.purge).toContain('content/**/*.md')
   })
 })

test/mock/tailwind.config.js

@@ -1,7 +1,5 @@
 module.exports = {
-  purge: {
-    content: [
-      'content/**/*.md'
-    ]
-  }
+  purge: [
+    'content/**/*.md'
+  ]
 }

test/ok.test.js

@@ -15,6 +15,7 @@ describe('ok', () => {
       buildModules: [
         tailwindModule
       ],
+      components: true,
       tailwindcss: {
         exposeConfig: true
       }
@@ -33,7 +34,7 @@ describe('ok', () => {
 
   test('render', async () => {
     const html = await get('/')
-    expect(html).toContain('Get the coolest t-shirts from our brand new store')
+    expect(html).toContain('Ready to dive in?')
     expect(html).not.toContain('.bg-pink-700')
   })