feat(tailwind): add setup-tailwind generator (#22)

* feat(tailwind): add setup-tailwind generator

* feat: update setup-tailwind base files

* feat(set-up-tailwind.ts): update style imports and test

* feat: remove update project and add tailwind option in application and preset

* feat: fix setup tailwind unit test issue

* refactor: apply pr comments

* refactor: cleanup

* refactor: cleanup

Author: reemardelarosa

CONTRIBUTING.md

@@ -146,7 +146,8 @@ it can be useful to publish to a local registry.
 - Run `npm i -g verdaccio` in Terminal 1 (keep it running)
 - Run `verdaccio
 - Run `npm adduser --registry http://localhost:4873` in Terminal 2 (real credentials are not required, you just need to be logged in. You can use your own login details.
-- Run `npm publish [package] --registry=http://localhost:4783`
+- Run `nx publish [package] --registry=http://localhost:4873`
+- Run `nx publish qwik-nx --registry=http://localhost:4873`
 
 ### ▶ 10. That's it! Thank you for your contribution! 🙏💓
 

README.md

@@ -55,6 +55,12 @@ nx generate qwik-nx:lib
 nx generate qwik-nx:component
 ```
 
+### Setting up Tailwind CSS
+
+```
+nx generate qwik-nx:setup-tailwind
+```
+
 ## ROADMAP:
 
 - [ ] Complete generators for Route, Component and more

packages/qwik-nx/generators.json

@@ -7,33 +7,42 @@
       "factory": "./src/generators/application/generator",
       "schema": "./src/generators/application/schema.json",
       "description": "Qwik application generator",
-      "aliases": ["app"]
+      "aliases": ["app", "a"]
     },
     "init": {
       "factory": "./src/generators/init/init",
       "schema": "./src/generators/init/schema.json",
-      "description": "qwik init plugin"
+      "description": "Initialize the qwik-nx plugin",
+      "aliases": ["i"]
     },
     "route": {
       "factory": "./src/generators/route/generator",
       "schema": "./src/generators/route/schema.json",
-      "description": "Adding a Qwik City route"
+      "description": "Adding a Qwik City route",
+      "aliases": ["r"]
     },
     "component": {
       "factory": "./src/generators/component/generator",
       "schema": "./src/generators/component/schema.json",
-      "description": "Generating a Qwik component"
+      "description": "Generating a Qwik component",
+      "aliases": ["cmp", "c"]
     },
     "library": {
       "factory": "./src/generators/library/generator",
       "schema": "./src/generators/library/schema.json",
-      "description": "library generator",
-      "aliases": ["lib"]
+      "description": "Create a Qwik Library",
+      "aliases": ["lib", "l"]
     },
     "preset": {
       "factory": "./src/generators/preset/generator",
       "schema": "./src/generators/preset/schema.json",
-      "description": "preset generator"
+      "description": "Create a Qwik Workspace Preset"
+    },
+    "setup-tailwind": {
+      "factory": "./src/generators/setup-tailwind/setup-tailwind",
+      "schema": "./src/generators/setup-tailwind/schema.json",
+      "description": "Set up Tailwind configuration for a project.",
+      "aliases": ["tailwind", "tw", "t"]
     }
   }
 }

packages/qwik-nx/src/generators/application/generator.ts

@@ -1,3 +1,4 @@
+import { SetupTailwindOptions } from './../setup-tailwind/schema.d';
 import {
   addProjectConfiguration,
   formatFiles,
@@ -16,6 +17,7 @@ import { runTasksInSerial } from '@nrwl/workspace/src/utilities/run-tasks-in-ser
 import { configureEslint } from '../../utils/configure-eslint';
 import { addCommonQwikDependencies } from '../../utils/add-common-qwik-dependencies';
 import { updateQwikApplicationProjectParams } from './utils/update-qwik-application-project-params';
+import setupTailwindGenerator from '../setup-tailwind/setup-tailwind';
 
 function addFiles(tree: Tree, options: NormalizedSchema) {
   const templateOptions = {
@@ -91,5 +93,12 @@ export default async function (tree: Tree, options: QwikAppGeneratorSchema) {
     await formatFiles(tree);
   }
 
+  if (options.tailwind) {
+    const twOptions: SetupTailwindOptions = {
+      project: normalizedOptions.name,
+    };
+    await setupTailwindGenerator(tree, twOptions);
+  }
+
   return runTasksInSerial(...tasks);
 }

packages/qwik-nx/src/generators/application/schema.d.ts

@@ -6,6 +6,7 @@ export interface QwikAppGeneratorSchema {
   style: 'css' | 'scss' | 'styl' | 'less' | 'none';
   linter: 'eslint' | 'none';
   skipFormat: boolean;
+  tailwind?: boolean;
   unitTestRunner: 'vitest' | 'none';
   strict: boolean;
   // router: 'qwik-city' | 'none'; // TODO: add setup w/o qwik-city

packages/qwik-nx/src/generators/preset/generator.spec.ts

@@ -8,6 +8,8 @@ describe('preset generator', () => {
   let appTree: Tree;
   const options: QwikWorkspacePresetGeneratorSchema = {
     name: 'test',
+    qwikAppName: 'test',
+    qwikAppStyle: 'css',
     style: 'css',
     linter: 'none',
     skipFormat: false,

packages/qwik-nx/src/generators/preset/schema.d.ts

@@ -1,4 +1,5 @@
-export interface QwikWorkspacePresetGeneratorSchema {
+export interface QwikWorkspacePresetGeneratorSchema
+  extends QwikAppGeneratorSchema {
   name: string;
   qwikAppName: string;
   tags?: string;
@@ -8,6 +9,7 @@ export interface QwikWorkspacePresetGeneratorSchema {
   qwikAppStyle: 'css' | 'scss' | 'styl' | 'less' | 'none';
   linter: 'eslint' | 'none';
   skipFormat: boolean;
+  tailwind?: boolean;
   unitTestRunner: 'vitest' | 'none';
   strict: boolean;
 }

packages/qwik-nx/src/generators/preset/schema.json

@@ -12,7 +12,7 @@
         "$source": "argv",
         "index": 0
       },
-      "x-prompt": "What name would you like to use?"
+      "x-prompt": "App Name"
     },
     "tags": {
       "type": "string",
@@ -64,6 +64,11 @@
       "type": "boolean",
       "description": "Creates an application with strict mode and strict type checking.",
       "default": true
+    },
+    "tailwind": {
+      "description": "Setup Tailwind",
+      "type": "boolean",
+      "default": false
     }
   },
   "required": ["name"]

packages/qwik-nx/src/generators/setup-tailwind/files/postcss.config.js__tmpl__

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

packages/qwik-nx/src/generators/setup-tailwind/files/tailwind.config.js__tmpl__

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};