Refactor tailwind configuration

README.md

@@ -5,14 +5,14 @@ Project setup is based on [cookiecutter-django](https://github.com/cookiecutter/
 ## Run for development
 
 ```bash
-# run tailwind cli (on project root folder!)
-npm run tailwind 
-
 # run vue vite dev server
 cd client && npm run dev
 
 # reset db and run django dev server
 ./prepare_server.sh
+
+# run tailwind cli (for tailwind support on django templates)
+cd client && npm run tailwind 
 ```
 
 ## Installation
@@ -61,7 +61,7 @@ npm run dev
 
 ### General part
 
-Cypress and TailwindCSS ist installed for client and server, so there is this package.json on the project root directory
+Cypress is installed for client and server, so there is this package.json on the project root directory
 
 ```bash
 # in project root directory

client/cypress/fixtures/example.json

@@ -1,5 +0,0 @@
-{
-  "name": "Using fixtures to represent data",
-  "email": "hello@cypress.io",
-  "body": "Fixtures are a great way to mock data for responses to routes"
-}

client/cypress/integration/example.spec.ts

@@ -1,8 +0,0 @@
-// https://docs.cypress.io/api/introduction/api.html
-
-describe('My First Test', () => {
-  it('visits the app root url', () => {
-    cy.visit('/')
-    cy.contains('h1', 'You did it!')
-  })
-})

client/cypress/plugins/index.ts

@@ -1,19 +0,0 @@
-/* eslint-env node */
-// ***********************************************************
-// This example plugins/index.ts can be used to load plugins
-//
-// You can change the location of this file or turn off loading
-// the plugins file with the 'pluginsFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/plugins-guide
-// ***********************************************************
-
-// This function is called when a project is opened or re-opened (e.g. due to
-// the project's config changing)
-
-export default ((on, config) => {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
-  return config
-}) as Cypress.PluginConfig

client/cypress/plugins/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "@vue/tsconfig/tsconfig.node.json",
-  "include": ["./**/*"],
-  "compilerOptions": {
-    "module": "CommonJS",
-    "preserveValueImports": false,
-    "types": ["node", "cypress/types/cypress"]
-  }
-}

client/cypress/support/commands.ts

@@ -1,25 +0,0 @@
-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

client/cypress/support/index.ts

@@ -1,20 +0,0 @@
-// ***********************************************************
-// This example support/index.js is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')

client/cypress/tsconfig.json

@@ -1,10 +0,0 @@
-{
-  "extends": "@vue/tsconfig/tsconfig.web.json",
-  "include": ["./integration/**/*", "./support/**/*"],
-  "compilerOptions": {
-    "isolatedModules": false,
-    "target": "es5",
-    "lib": ["es5", "dom"],
-    "types": ["cypress"]
-  }
-}

client/package.json

@@ -4,10 +4,12 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build && cp ./dist/index.html ../server/vbv_lernwelt/templates/vue/index.html && cp -r ./dist/static/vue ../server/vbv_lernwelt/static/",
+    "build:tailwind": "tailwindcss -i tailwind.css -o ../server/vbv_lernwelt/static/css/tailwind.css --minify",
     "test": "vitest run",
     "coverage": "vitest run --coverage",
     "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "tailwind": "tailwindcss -i tailwind.css -o ../server/vbv_lernwelt/static/css/tailwind.css --watch"
   },
   "dependencies": {
     "@headlessui/vue": "^1.6.4",

client/postcss.config.js

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

client/src/assets/styles/index.scss

@@ -1 +0,0 @@
-@import "../../../../server/vbv_lernwelt/static/css/tailwind.css";

client/src/main.ts

@@ -5,7 +5,7 @@ import {setupI18n} from './i18n'
 import App from './App.vue'
 import router from './router'
 
-import '@/assets/styles/index.scss'
+import '../tailwind.css'
 
 const i18n = setupI18n()
 const app = createApp(App)

client/tailwind.config.js

@@ -2,9 +2,9 @@ const colors = require('tailwindcss/colors')
 
 module.exports = {
   content: [
-    './client/index.html',
-    './client/src/**/*.{vue,js,ts,jsx,tsx}',
-    './server/vbv_lernwelt/**/*.{html,js}',
+    './index.html',
+    './src/**/*.{vue,js,ts,jsx,tsx}',
+    '../server/vbv_lernwelt/**/*.{html,js}',
   ],
   theme: {
     fontFamily: {

package.json

@@ -2,19 +2,16 @@
   "name": "vbv_lernwelt_cypress",
   "version": "1.0.0",
   "scripts": {
-    "build": "npm install --prefix client && npm run build --prefix client && npm run build:tailwind",
-    "build:tailwind": "tailwindcss -i ./tailwind/input.css -o ./server/vbv_lernwelt/static/css/tailwind.css --minify",
+    "build": "npm install --prefix client && npm run build --prefix client && npm run build:tailwind --prefix client",
     "test": "echo \"Error: no test specified\" && exit 1",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
     "cypress:ci": "cypress run --config baseUrl=http://localhost:8001",
-    "cypress:ci:open": "cypress open --config baseUrl=http://localhost:8001",
-    "tailwind": "tailwindcss -i ./tailwind/input.css -o ./server/vbv_lernwelt/static/css/tailwind.css --watch"
+    "cypress:ci:open": "cypress open --config baseUrl=http://localhost:8001"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.2",
     "@tailwindcss/typography": "^0.5.2",
-    "cypress": "^9.4.1",
-    "tailwindcss": "^3.0.24"
+    "cypress": "^9.4.1"
   }
 }