Getting started
with webpack

• 1Install Tailwind CSS

  Install tailwindcss and its peer dependencies via npm.

  npm install -D tailwindcss postcss autoprefixer

• 2Install the Framework

  Install @g-loot/css-framework via npm.

  npm install @g-loot/css-framework

• 3Import the CSS

  Import the Framework CSS into your project stylesheet.

  @import "@g-loot/css-framework/styles/globals.css";

• 4Adapt webpack

  Add postcss-loader to webpack.config.js.

  module: {

    rules: [

      {

        test: /\.(css)$/,

        use: ['style-loader', 'css-loader', 'postcss-loader'],

      }

    ]

  }

• 5Import & adapt the config file

  Import the framework config into your project tailwind.config.js and indicate which files Tailwind should scan.

  const tailwindConfig = require('@g-loot/css-framework/tailwind.config');

  module.exports = {

    ...tailwindConfig,

    content: [

      "./pages/*.{js,ts,jsx,tsx,json}",

    ],

  };

Example repository #

Check this example setup of the G-Loot Framework and Tailwind CSS on React (webpack).