Support for Tailwindcss

[gunbamz]

kindly consider support for tailwind css for this wonderful react-extension, Thanks.

[tit0uanf]

You can already use tailwind

[thehigherbounce]

You can use tailwind css while developing chrome extension. Fristly you need to install tailwind css npm install tailwindcss --save-dev Second you run npx tailwindcss init After running it, tailwind.config.js file is generated. Import this code.

module.exports = {
    content: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
    theme: {
        extend: {},
    },
    plugins: [],
    variants: {},
    corePlugins: {
        preflight: true,
    },
};

Configure Webpack to process CSS files using PostCSS and Tailwind: npm install postcss postcss-cli autoprefixer --save-dev

Create postcss.config.js file and insert this code.

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

Create a styles.css file in your project's src directory and import Tailwind's base styles:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Import the styles.css file in your index.js or App.js file: import './styles.css';

Modify your webpack config file to add a new rule for processing CSS files through PostCSS by adding this block:

rules: [{
                test: /\.tsx?$/,
                use: "ts-loader",
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader", "postcss-loader"],
            },
        ],

Here's what your webpack config file should look like:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
    entry: {
        popup: path.join(__dirname, 'src/index.tsx'),
        content: path.join(__dirname, 'src/chrome/content.tsx'),
        background: path.join(__dirname, 'src/chrome/background.ts'),
    },
    mode: 'development',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'static/js/[name].js',
        publicPath: '/',
    },
    module: {
        rules: [{
                test: /\.tsx?$/,
                use: "ts-loader",
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader", "postcss-loader"],
            },
        ],
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "public", "index.html"),
            chunks: ['popup'],
        }),
        new CopyWebpackPlugin({
            patterns: [{
                from: "public/manifest.json",
                to: ".",
            }, {
                from: "public/icons",
                to: "icons",
            }]
        }),
    ],
    devtool: "source-map",
    devServer: {
        compress: true,
        port: 3000,
        historyApiFallback: true,
    },
};

Hope this would be helpful. You can check this. https://github.com/good-guy1218/frontdoor-extension

[bigxalx]

Any way to debug this or learn more? After following the steps I don't get Tailwind to work but also don't get any error (logging errors in webpack in the build.js file).

[bigxalx]

Tried solving it using Tailwind CLI and found out that Tailwind just doesn't work when your React Injection Node is attached to a shadowRoot. Have yet to try the original solution after removing the shadowRoot but now at least with CLI it works!

[welfoz]

I've done it in this basic fork: https://github.com/selego/chrome-extension-boilerplate-react-tailwind It is also working for html injected through the Content 🚀