├── .editorconfig
├── .gitignore
├── .npmignore
├── README.md
├── generator
├── index.js
└── templates
│ ├── .eslintrc.js
│ ├── postcss.config.js
│ ├── src
│ └── assets
│ │ └── styles
│ │ └── tailwind.postcss
│ └── tailwind.config.js
├── index.js
├── package-lock.json
└── package.json
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | end_of_line = lf
6 | indent_size = 2
7 | indent_style = tab
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
11 | [**/templates/**]
12 | indent_style = space
13 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules*
2 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules*
2 | .*
3 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # vue-cli-plugin-tailwind
2 |
3 | [Tailwind CSS](https://tailwindcss.com/docs/what-is-tailwind)'s utility classes are minned by [Purgecss](https://www.purgecss.com), saving hundreds of kBs in production builds. [postcss-preset-env](https://preset-env.cssdb.org/features) polyfills modern CSS standards based on your `browserslist` configuration.
4 |
5 |
6 | ## Install
7 |
8 | ### TailwindCSS v1.0
9 |
10 | ```console
11 | vue add @ky-is/tailwind
12 | ```
13 |
14 | When the plugin is updated, you can upgrade your configuration with:
15 | ```console
16 | vue invoke @ky-is/tailwind
17 | ```
18 |
19 | ### TailwindCSS v0.x
20 |
21 | See the [`tailwind-0.x` branch](https://github.com/ky-is/vue-cli-plugin-tailwind/tree/tailwind-0.x).
22 |
23 |
24 | ## Usage
25 |
26 | Use inline classes, or `@apply`. For example, in `src/components/HelloWorld.vue` of the auto-generated cli app:
27 | ```html
28 |
33 | ```
34 |
35 | Applies scoped, browser-prefixed CSS, while PurgeCSS strips all other unused classes, including the thousands generated by Tailwind.
36 |
37 |
38 | ## Configuration
39 |
40 | ### `postcss.config.js` Plugins
41 |
42 | - `postcss-preset-env`: Defaults to stage 2, as these draft proposals are considered reasonably stable. If you want to enable handy experimental features like nested classes (`a { &:hover: {...} }`), change to `stage: 0`. You can safely delete this plugin from the list if you only write old CSS or use another preprocessor.
43 |
44 | - `@fullhuman/postcss-purgecss`: Purgecss removes all CSS classes that it can't find reference to. By default, all Vue and style files in the `src` folder are included. Adjust `content` array if you have CSS classes in other files. Add class names to the `whitelist` array you want to manually prevent PurgeCSS from removing if it thinks they're unused.
45 |
46 | ### Whitelisting
47 |
48 | Any CSS class that isn't used inside your `.html` files in `public/`, or by your `.vue` components (outside of the `\n`
42 | }
43 | files[appFileName] = lines.join('\n')
44 | })
45 | }
46 |
--------------------------------------------------------------------------------
/generator/templates/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | rules: {
3 | 'indent': [ 'error', 2 ],
4 | },
5 | }
6 |
--------------------------------------------------------------------------------
/generator/templates/postcss.config.js:
--------------------------------------------------------------------------------
1 | const IN_PRODUCTION = process.env.NODE_ENV === 'production'
2 |
3 | module.exports = {
4 | plugins: [
5 | require('postcss-preset-env')({ stage: 0 }),
6 | require('tailwindcss')(),
7 | IN_PRODUCTION && require('@fullhuman/postcss-purgecss')({
8 | content: [ `./public/**/*.html`, `./src/**/*.vue` ],
9 | defaultExtractor (content) {
10 | const contentWithoutStyleBlocks = content.replace(/