@qctrl/electron NPM

Q-CTRL Electron

The Q-CTRL CSS Framework.

Installation

$ git clone https://github.com/qctrl/electron.git
$ cd electron
$ yarn

Usage

Install Electron $ yarn add -D @qctrl/electron

Require Electron in your Tailwind config:

module.exports = {
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [
    require("@qctrl/electron"),
  ],
}

Note: It's critical when using Tailwind that you use PurgeCSS to reduce the file size in production.

Setup Example

**styles.css**

Import tailwind utilities and unless importing fonts in `<head>` you must include them here as shown.

@import url("https://fonts.googleapis.com/css?family=Roboto+Slab|Roboto:300,300i,400,400i,500,500i,700,700i&display=swap"); @import url("https://use.typekit.net/ltq4kgq.css"); @import url("https://cdn.materialdesignicons.com/5.0.45/css/materialdesignicons.min.css");

@tailwind base; @tailwind components; @tailwind utilities;

**package.json**

"devDependencies": { "autoprefixer": "^9.3.1", "postcss-cli": "^6.0.1", "postcss-import": "^12.0.1", "postcss-preset-env": "^6.7.0", "purgecss": "^2.1.0", "tailwindcss": "^1.0.0", }

postcss.config.js

module.exports = {
  plugins: [
		require("postcss-import"), 
		require("tailwindcss")("./tailwind.config.js"), 
		require('postcss-preset-env')({ stage: 1 })
	],
};

purge.config.js

module.exports = {
  // Specify the paths to all of the template files in your project
  content: ["./_site/**/*.html"],
  css: ["./_site/assets/css/site.css"],
  defaultExtractor: content => content.match(/[\w-/.:]+(?<!:)/g) || []
};