@apply no-underline to a

[WyriHaximus]

Trying to applu no-underline to all links on my site via a but I keep getting the following error when building using webpack:

app.css

@tailwind preflight;

@tailwind components;

@import "components/layout.css";
@import "components/the-dark-portal.css";

@tailwind utilities;

components/layout.css

a {
    @apply .no-underline;
}

Feels like I'm missing something but can't figure it out. The example at https://tailwindcss.com/docs/functions-and-directives#apply seem to imply it should be possible.

[adamwathan]

What does your PostCSS plugin list look like? I think it’s gonna be related to PostCSS-import.

Try replacing all of your Tailwind statements with import statements instead, like @import “~/tailwindcss/preflight”; instead of @tailwind preflight.

Also make sure PostCSS-import is the very first plugin in your plugin list. On Mon, Jul 23, 2018 at 2:06 PM Cees-Jan Kiewiet notifications@github.com wrote:

Trying to applu no-underline to all links on my site via a but I keep getting the following error when building using webpack:

[image: image] https://user-images.githubusercontent.com/147145/43097160-7607af6c-8ebb-11e8-8806-2ffbb2d1809c.png

root.css

@tailwind preflight;

@tailwind components; @import "components/layout.css";@import "components/the-dark-portal.css";

@tailwind utilities;

components/layout.css

a { @apply .no-underline; }

Feels like I'm missing something but can't figure it out. The example at https://tailwindcss.com/docs/functions-and-directives#apply seem to imply it should be possible.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/tailwindcss/discuss/issues/157, or mute the thread https://github.com/notifications/unsubscribe-auth/AEH3bIqpzTiEICFmtnfHpwfLyEoAACRCks5uJh7TgaJpZM4VbiFh .

[tlgreg]

You mentioned root.css but the error is about app.css Don't you accidentally import that somewhere separate from tailwind?

[WyriHaximus]

@tlgreg whoops root.css is app.css, my bad (updated the initial post)

@adamwathan

postcss.config.js

module.exports = {
    plugins: [require('tailwindcss')('./tailwind.js')],
}

But going by your comment it has to be something like:

module.exports = {
    plugins: [require('postcss-import'), require('tailwindcss')('./tailwind.js')],
}

And for what it is worth:

webpack.config.js

const DefinePlugin = require('webpack/lib/DefinePlugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require("path");
const glob = require("glob-all");
const PurgecssPlugin = require("purgecss-webpack-plugin");
const BabelMinifyPlugin = require('babel-minify-webpack-plugin');
const WebpackRequireFrom = require('webpack-require-from');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const GitRevisionPlugin = require('git-revision-webpack-plugin');

const webpackRequireFromConfig = {
    methodName: "wyriMapsNetGetChunkURL",
};

/**
 * Custom PurgeCSS Extractor
 * https://github.com/FullHuman/purgecss
 * https://github.com/FullHuman/purgecss-webpack-plugin
 * https://gist.github.com/andrewdelprete/d2f44d0c7f120aae1b8bd87cbf0e3bc8
 */
class TailwindExtractor {
    static extract(content) {
        return content.match(/[A-z0-9-:\/]+/g) || [];
    }
}
module.exports = {
    entry: {
        'js/app.js': './assets/js/apps/app/app.js',
        'css/app.css': './assets/css/app.css',
    },
    output: {
        path: __dirname + '/webroot/',
        filename: '[name]',
        chunkFilename: 'js/chunks/va[git-revision-version]/[name].js',
        crossOriginLoading: 'anonymous',
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: [/node_modules\/(?!react-sigma)/, /(node_modules)/],
                use: ['babel-loader'],
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                importLoaders: 1,
                            },
                        },
                        'postcss-loader',
                    ]
                }),
            },
            {
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'fonts/'
                    }
                }]
            },
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx', '.css']
    },
    plugins: [
        new DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
            }
        }),
        new ExtractTextPlugin('css/app.css'),
        new PurgecssPlugin({
            paths: glob.sync([
                path.join(__dirname, 'assets/**/*.js'),
            ]),
            extractors: [
                {
                    extractor: TailwindExtractor,
                    extensions: ['js']
                }
            ]
        }),
        new WebpackRequireFrom(webpackRequireFromConfig),
        new OptimizeCssAssetsPlugin({
            cssProcessor: require('cssnano'),
            cssProcessorOptions: { safe: true, discardComments: { removeAll: true } },
            canPrint: true
        }),
        new GitRevisionPlugin({
            versionCommand: 'describe --tags | cut --delimiter="-" -f1',
        }),
    ],
    stats: {
        colors: true,
        warnings: false,
    },
};

[WyriHaximus]

Right, so adding postcss-import to the plugin list fixes the build error but for some reason it won't add the css from those files into the final result.

But replacing @tailwind preflight; with @import “~/tailwindcss/preflight”; breaks everything again.

Looking into that

[WyriHaximus]

Narrowed it down to that any @imports are parsed but not included for some odd reason.