Skip to content

Instantly share code, notes, and snippets.

Last active Jul 15, 2022
What would you like to do?
TailwindCSS Setup
mix 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: [
plugins: [require("@tailwindcss/ui")],
# add postcss.config.js
module.exports = {
plugins: [
# 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: [
# 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
cd assets
npm i
npm run deploy
./node_modules/webpack/bin/webpack.js --mode development
cd ..
mix phx.digest
Copy link

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: [
      // 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