Getting started

• 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 Stryda Framework and Tailwind CSS on React (webpack).