Skip to content

Instantly share code, notes, and snippets.

@jfreeze
Last active Jul 15, 2022
Embed
What would you like to do?
TailwindCSS Setup
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
@jfreeze
Copy link
Author

jfreeze commented Sep 8, 2020

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"
      }
    })
  ],

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment