Skip to content

Instantly share code, notes, and snippets.

@samir

samir/README.md

Last active August 26, 2020 00:56
Show Gist options
  • Save samir/cef2701fefd378e35e93e9e1d3c4428e to your computer and use it in GitHub Desktop.
Save samir/cef2701fefd378e35e93e9e1d3c4428e to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. samir revised this gist Aug 26, 2020. 2 changed files with 20 additions and 14 deletions.
    30 changes: 17 additions & 13 deletions postcss.config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,27 +1,31 @@
    const autoprefixer = require('autoprefixer');
    const tailwindcss = require('tailwindcss');
    const postcssPurgecss = require(`@fullhuman/postcss-purgecss`);
    const autoprefixer = require('autoprefixer')
    const tailwindcss = require('tailwindcss')
    const postcssPurgecss = require('@fullhuman/postcss-purgecss')

    const purgecss = postcssPurgecss({
    // Specify the paths to all of the template files in your project.
    content: [
    './public/**/*.html',
    './src/**/*.vue',
    './src/**/*.vue'
    ],
    // Include any special characters you're using in this regular expression.
    // See: https://tailwindcss.com/docs/controlling-file-size/#understanding-the-regex
    defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
    // Whitelist auto generated classes for transitions and router links.
    // From: https://github.com/ky-is/vue-cli-plugin-tailwind
    whitelistPatterns: [/-(leave|enter|appear)(|-(to|from|active))$/, /^(?!(|.*?:)cursor-move).+-move$/, /^router-link(|-exact)-active$/],
    });
    whitelistPatterns: [
    /-(leave|enter|appear)(|-(to|from|active))$/,
    /^(?!(|.*?:)cursor-move).+-move$/,
    /^router-link(|-exact)-active$/
    ]
    })

    module.exports = {
    plugins: [
    tailwindcss,
    autoprefixer,
    module.exports = {
    plugins: [
    tailwindcss,
    autoprefixer,
    ...process.env.NODE_ENV === 'production'
    ? [purgecss]
    : [],
    ],
    };
    : []
    ]
    }
    4 changes: 3 additions & 1 deletion start.sh
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    #!/bin/bash

    npm install tailwind postcss-cli autoprefixer @fullhuman/postcss-purgecss --save-dev
    npm install tailwindcss postcss-cli autoprefixer @fullhuman/postcss-purgecss --save-dev
    mkdir src/assets/styles
    touch src/assets/styles/index.css
  2. samir revised this gist Aug 19, 2020. 3 changed files with 32 additions and 1 deletion.
    4 changes: 4 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,4 @@

    # postcss.config.js
    https://markus.oberlehner.net/blog/setting-up-tailwind-css-with-vue/

    27 changes: 27 additions & 0 deletions postcss.config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,27 @@
    const autoprefixer = require('autoprefixer');
    const tailwindcss = require('tailwindcss');
    const postcssPurgecss = require(`@fullhuman/postcss-purgecss`);

    const purgecss = postcssPurgecss({
    // Specify the paths to all of the template files in your project.
    content: [
    './public/**/*.html',
    './src/**/*.vue',
    ],
    // Include any special characters you're using in this regular expression.
    // See: https://tailwindcss.com/docs/controlling-file-size/#understanding-the-regex
    defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
    // Whitelist auto generated classes for transitions and router links.
    // From: https://github.com/ky-is/vue-cli-plugin-tailwind
    whitelistPatterns: [/-(leave|enter|appear)(|-(to|from|active))$/, /^(?!(|.*?:)cursor-move).+-move$/, /^router-link(|-exact)-active$/],
    });

    module.exports = {
    plugins: [
    tailwindcss,
    autoprefixer,
    ...process.env.NODE_ENV === 'production'
    ? [purgecss]
    : [],
    ],
    };
    2 changes: 1 addition & 1 deletion start.sh
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,3 @@
    #!/bin/bash

    npm install tailwind postcss-cli autoprefixer --save-dev
    npm install tailwind postcss-cli autoprefixer @fullhuman/postcss-purgecss --save-dev
  3. samir created this gist Aug 19, 2020.
    3 changes: 3 additions & 0 deletions start.sh
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    #!/bin/bash

    npm install tailwind postcss-cli autoprefixer --save-dev