Merge pull request #4 from gokhannozturk/feat/add-styles

feat: adds tailwindcss

.eslintrc.cjs

@@ -18,12 +18,14 @@ module.exports = {
       {
         singleQuote: true,
         trailingComma: 'es5',
-        printWidth: 120,
+        printWidth: 80,
         tabWidth: 2,
         semi: true,
         bracketSpacing: true,
         arrowParens: 'always',
-        parser: 'typescript',
+        jsxBracketSameLine: false,
+
+        vueIndentScriptAndStyle: false,
       },
     ],
   },

lib/main.ts

@@ -1,3 +1,4 @@
+import '../src/index.css';
 import HelloWorld from '../src/components/HelloWorld.vue';
 
 export { HelloWorld };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "design-system-vue",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "type": "module",
   "files": [
     "dist"
@@ -34,11 +34,14 @@
     "@vue/eslint-config-typescript": "^11.0.0",
     "@vue/test-utils": "^2.0.2",
     "@vue/tsconfig": "^0.1.3",
+    "autoprefixer": "^10.4.8",
     "eslint": "^8.21.0",
     "eslint-plugin-vue": "^9.3.0",
     "jsdom": "^20.0.0",
     "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.16",
     "prettier": "^2.7.1",
+    "tailwindcss": "^3.1.8",
     "typescript": "~4.7.4",
     "vite": "^3.0.4",
     "vitest": "^0.21.0",

postcss.config.cjs

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

src/App.vue

@@ -1,55 +1,7 @@
 <script setup lang="ts">
-// import HelloWorld from './components/HelloWorld.vue';
-import TheWelcome from './components/TheWelcome.vue';
-import { HelloWorld as HelloWorld2 } from '../dist/design-system-vue.js';
+import { HelloWorld } from '../dist/design-system-vue.js';
 </script>
 
 <template>
-  <header>
-    <img
-      alt="Vue logo"
-      class="logo"
-      src="./assets/logo.svg"
-      width="125"
-      height="125"
-    />
-
-    <div class="wrapper">
-      <!-- <HelloWorld msg="You did it!" /> -->
-      <HelloWorld2 msg="ben kit" />
-    </div>
-  </header>
-
-  <main>
-    <TheWelcome />
-  </main>
+  <HelloWorld msg="ben kit" class="text-3xl font-bold underline" />
 </template>
-
-<style scoped>
-header {
-  line-height: 1.5;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-}
-</style>

src/components/HelloWorld.vue

@@ -7,34 +7,5 @@ defineProps<{
 <template>
   <div class="greetings">
     <h1 class="green">{{ msg }}</h1>
-    <h3>
-      You’ve successfully created a project with
-      <a target="_blank" href="https://vitejs.dev/">Vite</a> +
-      <a target="_blank" href="https://vuejs.org/">Vue 3</a>.
-    </h3>
   </div>
 </template>
-
-<style scoped>
-h1 {
-  font-weight: 500;
-  font-size: 2.6rem;
-  top: -10px;
-}
-
-h3 {
-  font-size: 1.2rem;
-}
-
-.greetings h1,
-.greetings h3 {
-  text-align: center;
-}
-
-@media (min-width: 1024px) {
-  .greetings h1,
-  .greetings h3 {
-    text-align: left;
-  }
-}
-</style>