I can't seem to make tailwind css work with my phoenix/react project

Phoenix Forum Questions / Help
, , ,
1

Hello all,
I need help with my Tailwind setup. Disclaimer I am a bit of a newbie in the whole asset management thing so to anybody answering please be explain any suggestions, thanks in advance.

So I have created a phoenix project which resides within an umbrella project with sole purpose to serve my react app.

The whole setup seems it is working fine when developing the react app but my lack of understanding in the webpack and in general asset management field is proved to be a burden now that I need to set up tailwind css to React project. I am working with Phoenix 1.5.7 webpack 4.41.5 sass-loader 8.0.2 postcss-loader 4.2.0

My webpack config looks like this

const path = require('path');  
const glob = require('glob');  
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin'); 
  
module.exports = (env, options) => {
  const devMode = options.mode !== 'production';
  
  return {
    optimization: { 
      minimizer: [
        new TerserPlugin({ cache: true, parallel: true, sourceMap: devMode }),
        new OptimizeCSSAssetsPlugin({}) 
      ]
    },
    entry: {
      'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js'])
    },
    output: { 
      filename: '[name].js',   
      path: path.resolve(__dirname, '../priv/static/js'),
      publicPath: '/js/'       
    },
    devtool: devMode ? 'eval-cheap-module-source-map' : undefined,
    module: { 
      rules: [ 
        {
          test: /\.js$/,
          exclude: /node_modules/,        
          use: {
            loader: 'babel-loader'          
          }
        },
        {
          test: /\.[s]?css$/,
          use: [
              MiniCssExtractPlugin.loader,
              'css-loader',
              'postcss-loader',
              'sass-loader',
          ],
        }
      ]
    },
    plugins: [
      new MiniCssExtractPlugin({ filename: '../js/Main.scss' }),
      new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
    ]
    .concat(devMode ? [new HardSourceWebpackPlugin()] : [])
  }
};

My postss.config.js looks like this

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

My tailwind.config.js looks like this

module.exports = {
  content: [
    "./js/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

And all the react code resides within the /js folder.

After all I am trying to use tailwind by importing tailwind components in a file called Main.css

@tailwind base;

@tailwind components;

@tailwind utilities;

which I then import to my react app base file Main.js

I would greatly appreciate if anybody that can even identify what looks off with my set up and direct me to any kind of sources .

2

Ok, Now I came to realize that there is an apparent answer.

I have changed the UserMeal Schema to this

  schema "history_user_meals" do
    field :meal_datetime, :utc_datetime
    field :title, :string
    field :user_id, :id

    has_many :recipe_user_meals, RecipeUserMeal, on_replace: :delete

    timestamps()
  end

  @doc false
  def changeset(user_meal, attrs) do
    user_meal
    |> cast(attrs, [:title, :meal_datetime])
    |> cast_assoc(:recipe_user_meals, with: &RecipeUserMeal.changeset/2)
    |> validate_required([:title])
  end

So that the cast_assoc only modifies the middle table and I am just using an additional preloading when returning objects.