We will also add tailwind forms and tailwind-aspect-ratio for working with images.
mix phx.new tailwind
cd assets
yarn add --dev autoprefixer postcss postcss-loader postcss-import tailwindcsscreate a file postcss.config.js inside assets directory
// postcss.config.js
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer')
]
}open webpack.config.js and change sass-loader to postcss-loader
{ test: /\.[s]?css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader', 'postcss-loader' ],}
open app.scss and delete all content. and add
@import "tailwindcss/base";@import "tailwindcss/components";@import "tailwindcss/utilities";
inside assets directory, run (optional)
npx tailwind init --full // --full is optional toothis will generate a tailwind.config.js file which you can use to extend the tailwindcss if necessary (we will use it to add a form plugin)
Tailwindcss in integrated. to test just put a background color in app.html.eex
<body class=”bg-yellow-50">
This will give a background color from tailwind css.
If we want to add tailwind form plugin
yarn add @tailwindcss/formsthen in our tailwind.config.js file add this line
plugins: [
require('@tailwindcss/forms'),
// ...
]for a test, let’s copy paste form code from this link
our form should look exactly like the link.
Adding aspect-ratio plugin, in our asset folder
yarn add @tailwindcss/aspect-ratioThen in our tailwind.config.js file let’s add
plugins: [ require(‘@tailwindcss/forms’), require(‘@tailwindcss/aspect-ratio’)],
then add following in any template file to test
<div>
<div class="h-48 w-48">
<div class="aspect-w-5 aspect-h-4"> <img class="object-cover" src="https://images.unsplash.com/photo-1601758124360- 86f5a0432c42? ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb- 1.2.1&auto=format&fit=crop&w=1534&q=80" alt="">
</div>
</div>
</div>
Happy tailwinding.