first commit

Author: christhofer

.eslintrc.js

@@ -0,0 +1,30 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    es6: true,
+  },
+  rules: {
+    'brace-style': 'warn', // [1tbs default, stroustrup, allman]
+    'comma-dangle': ['warn', 'always-multiline'],
+    'indent': ['warn', 2],
+    'no-unused-vars': 'warn',
+    'quotes': ['warn', 'single', { avoidEscape: true }],
+    'semi': ['warn', 'never'],
+
+    'array-bracket-spacing': ['warn', 'never'],
+    'comma-spacing': ['warn', { before: false, after: true }],
+    'key-spacing': ['warn'],
+    'keyword-spacing': ['warn'],
+    'no-multi-spaces': ['warn'],
+    'no-trailing-spaces': ['warn'],
+    'object-curly-spacing': ['warn', 'always'],
+    'space-before-function-paren': ['warn', 'always'],
+    'space-before-blocks': 'warn',
+    'space-infix-ops': ['warn'],
+    'space-in-parens': ['warn', 'never'],
+  },
+  globals: {
+    process: true,
+  },
+}

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+yarn.lock
+package-lock.json

README.md

@@ -1 +1,29 @@
-# tailwindcss-skeleton-screen
+# tailwindcss-skeleton-screen
+
+Tailwindcss plugin to make skeleton screen easier than ever.
+
+[Live Demo](https://jsfiddle.com)
+
+## Installation
+
+```sh
+# Using npm
+npm install -D @gradin/tailwindcss-skeleton-screen
+
+# Using Yarn
+yarn add -D @gradin/tailwindcss-skeleton-screen
+```
+
+Then add the plugin too `tailwind.config.js` file
+
+```js
+module.exports = {
+  theme: {
+    // ...
+  },
+  plugins: [
+    require('@gradints/tailwindcss-skeleton-screen'),
+    // ...
+  ],
+}
+```

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@gradin/tailwindcss-skeleton-screen",
+  "version": "0.0.1",
+  "description": "Tailwindcss plugin to make skeleton screen easier than ever.",
+  "main": "src/index.js",
+  "scripts": {
+    "prepublishOnly": "node scripts/build.js",
+    "test": "jest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gradints/tailwindcss-skeleton-screen.git"
+  },
+  "keywords": [
+    "tailwind",
+    "tailwindcss",
+    "skeleton screen",
+    "loading",
+    "animation"
+  ],
+  "author": "Christhofer",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/gradints/tailwindcss-skeleton-screen/issues"
+  },
+  "homepage": "https://github.com/gradints/tailwindcss-skeleton-screen#readme",
+  "devDependencies": {
+    "clean-css": "^5.1.2",
+    "eslint": "^7.24.0",
+    "tailwindcss": "^2.1.1"
+  }
+}

src/index.js

@@ -0,0 +1,52 @@
+const plugin = require('tailwindcss/plugin')
+
+module.exports = plugin(
+  function ({ addUtilities }) {
+    addUtilities([
+      {
+        '.loading': {
+          position: 'relative',
+          overflow: 'hidden',
+          backgroundColor: '#c7c7c7',
+        },
+        '.loading::after': {
+          display: 'block',
+          position: 'absolute',
+          height: '100%',
+          top: 0,
+          left: '-10rem',
+          width: '10rem',
+          content: "''",
+          background: 'linear-gradient(to right, transparent 0%, #E8E8E8 50%, transparent 100%)',
+          animation: 'skeletonloading 1s cubic-bezier(0.4, 0.0, 0.2, 1) infinite',
+        },
+        '@keyframes skeletonloading': {
+          from: {
+            left: '-10rem',
+          },
+          to: {
+            left: '100%',
+          },
+        },
+      },
+    ])
+  }
+)
+
+// .loading {
+//   @apply bg-gray-300 overflow-hidden relative;
+//   &::after {
+//     @apply block absolute h-full top-0 -left-40 w-40;
+//     content: '';
+//     background: linear-gradient(to right, transparent 0%, #E8E8E8 50%, transparent 100%);
+//     animation: skeletonloading 1s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
+//   }
+// }
+// @keyframes skeletonloading {
+//   from {
+//     @apply -left-40;
+//   }
+//   to   {
+//     @apply left-full;
+//   }
+// }