The setup was slow when I used the tailwind directives like @apply inside the CSS files

List of packages installed

😊 Clone this repo

• Install Packages

  npm install

• To run the dev server

npm run start

• To run the prod build

npm run build

Steps to Follow

• open the folder(your project folder) and run

  npm init -y
  

  to create package.json with default settings.

• Install Snowpack using

  npm i snowpack -D
  

• add these scripts to your package.json

  "scripts": {
    "start": "snowpack dev",
    "build": "snowpack build"
  },
  

  start - to run the local development server. build - to create a production build

• Let's install TailwindCSS 2.x

  npm install tailwindcss@latest postcss@latest autoprefixer@latest -D
  

• next we need to create tailwind.config.js and postcss.config.js. To generate these files run

  npx tailwindcss init -p
  

• add tailwindcss and autoprefixer to the postcss plugins inside postcss.config.js

  module.exports = {
    plugins: [require("tailwindcss"), require("autoprefixer")],
  };
  

• next we need to instruct snowpack to run postcss. Install snowpack postcss plugin

  npm install @snowpack/plugin-postcss postcss postcss-cli -D
  

• next we need to create snowpack.config.js in the root of the project directory and add the following code

  module.exports = {
      plugins: ["@snowpack/plugin-postcss"],
  };
  

• create these files inside the root of the project directory
  • index.html
  • index.css
  • index.js

@tailwind base;
@tailwind components;
@tailwind utilities;

• Add index.css to index.html using

   <link rel="stylesheet" href="index.css" />
  

• Add purge rule to tailwind.config.js

module.exports = {
  purge: ["./**/*.html"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

and run

npm run build

which creates a build folder.

Made with ❤️ - by FrontEndFunn