TailwindCSS Setup

tailwindsetup.txt

mix phx.new app_name
cd app_name
cd assets


npm install tailwindcss @tailwindcss/ui postcss-import postcss-loader --save-dev
npx tailwindcss init
npx tailwind init tailwindcss-full.js --full

# Change the app dir to your app dir!
# modify tailwind.config.js
  purge: [
    "../lib/<app_name>/**/*.ex",
    "../lib/<app_name>_web/**/*.ex",
    "../lib/<app_name>_web/**/*.html.eex",
    "../lib/<app_name>_web/**/*.html.leex",
    "./js/**/*.js"
  ],


  plugins: [require("@tailwindcss/ui")],


# add postcss.config.js
module.exports = {
  plugins: [
    require("postcss-import"),
    require('tailwindcss'),
    require('autoprefixer'),
    require('postcss-nested')
  ]
}

# modify deploy script in package.json
  "scripts": {
    "deploy": "NODE_ENV=production webpack --mode production",
    ...
  },


# add ‘postcss-loader’ to module/rules/use in webpack.config.js
        {
          test: /\.[s]?css$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            'sass-loader',
            'postcss-loader'
          ],
        }


# mv app.scss to live_view.scss
remove @import "./phoenix.css";

# create app.scss
/* purgecss start ignore */

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

/* purgecss end ignore */

@import "tailwindcss/utilities";

@import "live_view.scss";


cd ..
mix deps.get

#Test

    cd assets
    npm i
    npm run deploy
    ./node_modules/webpack/bin/webpack.js --mode development
    cd ..
    mix phx.digest

I have added some extra features to some of my projects where I use hero patterns. This is in the tailwind.config.js file.

  variants: {
    lineClamp: ['responsive']
  },
  plugins: [
    require("@tailwindcss/ui"),
    require('@neojp/tailwindcss-line-clamp-utilities'),
    require("tailwind-heropatterns")({
      // as per tailwind docs you can pass variants
      variants: [],

      // the list of patterns you want to generate a class for
      // the names must be in kebab-case
      // an empty array will generate all 87 patterns
      patterns: ["graph-paper", "squares", "bubbles", "floating-cogs", "circuit-board", "diagonal-lines"],

      // The foreground colors of the pattern
      colors: {
        default: "#f7fafc",
        "gray-900": "#1a202c", //also works with rgb(0,0,205)
        "blue-gray-400": "#829AB1"
      },

      // The foreground opacity
      opacity: {
        default: "0.05",
        "40": "0.4",
        "100": "1.0"
      }
    })
  ],