I am using a admin template on one of my laravel project and here are the files:
tailwind.config.js
const colors = require("tailwindcss/colors");
const {
toRGB,
withOpacityValue,
} = require("#left4code/tw-starter/dist/js/tailwind-config-helper");
module.exports = {
mode: "jit",
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.jsx",
"./resources/**/*.vue",
],
theme: {
extend: {
colors: {
rgb: toRGB(colors),
primary: withOpacityValue("--color-primary"),
secondary: withOpacityValue("--color-secondary"),
success: withOpacityValue("--color-success"),
info: withOpacityValue("--color-info"),
warning: withOpacityValue("--color-warning"),
pending: withOpacityValue("--color-pending"),
danger: withOpacityValue("--color-danger"),
light: withOpacityValue("--color-light"),
dark: withOpacityValue("--color-dark"),
slate: {
50: withOpacityValue("--color-slate-50"),
100: withOpacityValue("--color-slate-100"),
200: withOpacityValue("--color-slate-200"),
300: withOpacityValue("--color-slate-300"),
400: withOpacityValue("--color-slate-400"),
500: withOpacityValue("--color-slate-500"),
600: withOpacityValue("--color-slate-600"),
700: withOpacityValue("--color-slate-700"),
800: withOpacityValue("--color-slate-800"),
900: withOpacityValue("--color-slate-900"),
},
darkmode: {
50: withOpacityValue("--color-darkmode-50"),
100: withOpacityValue("--color-darkmode-100"),
200: withOpacityValue("--color-darkmode-200"),
300: withOpacityValue("--color-darkmode-300"),
400: withOpacityValue("--color-darkmode-400"),
500: withOpacityValue("--color-darkmode-500"),
600: withOpacityValue("--color-darkmode-600"),
700: withOpacityValue("--color-darkmode-700"),
800: withOpacityValue("--color-darkmode-800"),
900: withOpacityValue("--color-darkmode-900"),
},
},
fontFamily: {
roboto: ["Roboto"],
},
container: {
center: true,
},
maxWidth: {
"1/4": "25%",
"1/2": "50%",
"3/4": "75%",
},
strokeWidth: {
0.5: 0.5,
1.5: 1.5,
2.5: 2.5,
},
},
},
plugins: [require("#tailwindcss/forms")],
variants: {
extend: {
boxShadow: ["dark"],
},
},
}
and this, is my current webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/admin-template/js/app.js', 'public/assets/js/admin-template.js')
.js('resources/js/app.js', 'public/assets/js')
.react()
.sass('resources/sass/app.scss', 'public/assets/css')
.postCss("resources/admin-template/css/app.css", "public/assets/css/admin-template.css");
and here is my current postcss.config.js
module.exports = {
plugins: [
require("postcss-import"),
require("postcss-advanced-variables"),
require("tailwindcss/nesting"),
require("tailwindcss")("./tailwind.config.js"),
require("autoprefixer"),
],
};
Now, I had separately created frontend design, and it has this tailwind.config.js
module.exports = {
content: ['./*.html'],
theme: {
extend: {
colors: {
'primary': '#1A1C29',
'primary-light': '#2A2D3E',
'theme-blue': '#2563eb',
'theme-green': '#06D594',
'light-gray': '#999ba6',
'yellow': '#FFFF00',
'gold': '#facc15',
'red': '#FF0000'
},
fontFamily:{
'poppins': ['Poppins', 'sans-serif'],
'roboto' : ['Roboto', 'sans-serif']
},
fontSize:{
'xxs': '.63rem',
},
screens:{
'sm': '575px',
},
},
},
}
Now, I have this css on resources/css/front.css, now how could I compile on this laravel project by using this second tailwind config value for front .css only.
I have tried this by adding this line on webpack. But, its not compiling correctly, its using different colors combination.
.postCss("resources/css/front.css", "public/assets/css/front.css");
What would be the best and safest to handle this scenario with single tailwind.config.js
If merging both tailwind.config.js files is not an option, calling mix.postCss twice is one way to do it.
The postCss method accepts an array of PostCSS plugins. This allows you to pass tailwindcss with a different configuration file.
webpack.mix.js
const mix = require('laravel-mix');
mix.postCss('resources/css/app.css', 'public/css', [
require('tailwindcss')('tailwind.config.js')
]);
mix.postCss('resources/css/front.css', 'public/css', [
require('tailwindcss)('tailwind-front.config.js')
]);
In that case I'd suggest removing the postcss.config.js file from your project and providing the array of plugins manually for each calls to postCss.
webpack.mix.js
const mix = require('laravel-mix');
mix.postCss('resources/css/app.css', 'public/css', [
require("postcss-import"),
require("postcss-advanced-variables"),
require("tailwindcss/nesting"),
require('tailwindcss')('tailwind.config.js'),
require("autoprefixer"),
]);
mix.postCss('resources/css/front.css', 'public/css', [
require("postcss-import"),
require("postcss-advanced-variables"),
require("tailwindcss/nesting"),
require('tailwindcss')('tailwind-front.config.js'),
require("autoprefixer"),
]);
Related
Trying to export scss file with bootstrap 5.2 to a css file and linking that file to a index.php file but class names i guess are getting mangled somehow so I can't use bootstrap class like for a button btn btn-primary, as the generated classes names are like GcpZ2uTclIsK3IUwa3qT XWJXtmqteXQMN_oydssO
I have tried many webpack config but unable to find a solution. My current configs are shared below.
how can I use bootstrap exported scss in webpack build ?
webpack.config.js
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
mode: "development",
devtool: "source-map",
entry: "./src/js/main.js",
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist"),
},
plugins: [
new MiniCssExtractPlugin({
linkType: "text/css",
}),
],
module: {
rules: [
{
test: /\.scss$/,
use: [
{ loader: MiniCssExtractPlugin.loader },
{
loader: "css-loader",
options: {
modules: true,
},
},
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: () => [require("autoprefixer")],
},
},
},
{
loader: "sass-loader",
},
],
},
],
},
};
styles.scss
#import "~bootstrap/scss/bootstrap";
main.js
import "../scss/styles.scss";
import * as bootstrap from 'bootstrap'
import {addNumber} from './sum'
import {divideNumbers} from './division'
import {buttonClickAction} from './events'
I'm so new to webpack so I didn't exactly know what was I doing wrong.
The problem was in webpack config file css-loader as bootstrap works with global css selector not module based i had to remove
{
options: {
modules: true,
},
},
I'm trying to set up some custom fonts in tailwinds config file. It seems to work however it adds the custom fonts and the original tailwind font styles in my css and the order of them makes it default to tailwinds css (see the screenshot of the inspector of the css)
bellow is my config file code. some things to note I'm using Apostrophe CMS and scss.
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
fontFamily: {
sans: [ 'Graphik', 'sans-serif' ],
serif: [ 'Merriweather', 'serif' ]
}
},
variants: {
extend: {}
},
plugins: []
};
Try putting your fontFamily inside extend, like this:
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
fontFamily: {
sans: [ 'Graphik', 'sans-serif' ],
serif: [ 'Merriweather', 'serif' ],
},
},
},
variants: {
extend: {}
},
plugins: []
};
So i have a laravel/vuejs app , i'm trying to preload the css chunks that i have generated upon splitting components, it works fine but it generates an index.html. Is it possible to somehow do it in blade templates? What could be the solution?
Here is my webpack.config.js
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const {VueLoaderPlugin} = require("vue-loader");
const PreloadWebpackPlugin = require('preload-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require("path");
module.exports = {
entry: {
main: "./resources/js/app.js",
},
output: {
publicPath: '/',
path: path.resolve(__dirname, "public"),
},
plugins: [
new HtmlWebpackPlugin(),
new VuetifyLoaderPlugin(),
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: `components/[name].css`
}),
new PreloadWebpackPlugin({
rel: 'preload',
include: 'asyncChunks', // can be 'allChunks' or 'initial' or see more on npm page
fileBlacklist: [/\.map|.js/], // here may be chunks that you don't want to have preloaded
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
"css-loader"
]
},
{
test: /\.js$/,
loader: 'babel-loader',
},
{
test: /\.s[ac]ss$/i,
use: [
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
],
},
{
test: /\.vue$/,
loader: "vue-loader",
options: {
extractCSS: true
}
},
],
},
resolve: {
extensions: ['.js', '.vue'],
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/](vue|axios|jquery|bootstrap)[\\/]/,
name: 'vendor',
chunks: 'all'
}
}
}
}
}
And one final question , is it better to preload/prefetch the js chunks too? ( to optimize the performance )
I'm using Laravel Mix and PostCSS to build Tailwind.
Everything works, I can even Purge unused styles.
I have strange outputs when I build (a LOT of these) :
--tw-space-y-reverse [
{
index: 40,
token: '-',
type: 9,
eval: [Function: sub],
precedence: 1,
show: '-'
},
{
index: 40,
token: '-',
type: 9,
eval: [Function: sub],
precedence: 1,
show: '-'
}
]
I'm using the latest TailwindCSS version.
Here is the relevant part of my webpack.mix.js :
const mix = require('laravel-mix');
require('laravel-mix-purgecss');
let tailwindcss = require('tailwindcss');
mix.postCss('resources/css/tailwind.css', 'public/css/soumettre202101.css', [
tailwindcss('./tailwind.config.js'),
]);
I don't even know where to start. I don't know what's causing this.
Any lead will be appreciated!
I can remove the output by disabling this core plugins (in my tailwind.config.js) :
module.exports = {
corePlugins: {
space: false,
ringWidth: false,
ringColor: false,
ringOffsetWidth: false,
ringOffsetColor: false,
ringOpacity: false,
divideOpacity: false,
divideColor: false,
divideWidth: false,
}
}
Even more strange : if I only disable "space", the output changes from the one above to the same thing but with --tw-ring-width-reverse, as if the last plugin used produces the output...
I'm not sure if that helps, but I will show you my config that seems to be working fine (using Sass), I removed some irrelevant parts.
webpack.mix.js
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
mix.sass('resources/sass/tailwind.scss', 'public/css')
.options({
processCssUrls: false,
postCss: [ tailwindcss('./resources/tailwind.config.js') ],
})
.version();
tailwind.scss
#import "~tailwindcss/base";
#import "~tailwindcss/components";
#import "~tailwindcss/utilities";
and finally tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors');
module.exports = {
purge: {
content: [
'./resources/views/**/*.blade.php',
'./resources/js/**/*.js',
],
defaultExtractor: content => content.match(/[\w-/.:]+(?<!:)/g) || []
},
theme: {
extend: {
fontFamily: {
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
},
colors: {
// some custom colors
gray: colors.trueGray,
indigo: colors.indigo,
red: colors.rose,
yellow: colors.amber,
bluegray: colors.blueGray,
orange: colors.amber,
teal: colors.teal,
pink: colors.pink,
green: colors.green,
},
},
},
variants: {
gridColumn: ['responsive', 'hover'],
gridColumnStart: ['responsive', 'hover'],
gridColumnEnd: ['responsive', 'hover'],
},
plugins: [
require('tailwindcss'),
require('autoprefixer'),
require('#tailwindcss/forms'),
require('#tailwindcss/typography'),
require('#tailwindcss/aspect-ratio'),
],
};
When I run nom run dev everything seems to be fine, there is no output like you showed but I have things like this:
.space-y-11 > :not([hidden]) ~ :not([hidden]){
--tw-space-y-reverse: 0;
margin-top: calc(2.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(2.75rem * var(--tw-space-y-reverse));
}
Obviously later only those that are really used in blade/js files are in final file when I run npm run prod
The problem has been solved by ugrapding Laravel Mix to the latest version.
I installed Tailwind using a tutorial and tried working around with a custom tailwind config file, but when I try to add first, last, or group pseudo-classes, it doesn't affect the CSS. I also previously noticed this with inset, and I added the inset section manually. Am I missing anything in config or Mix?
Tailwind config file
const { rotate } = require('tailwindcss/defaultTheme');
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
purge: [
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
cursor: {
'none': 'none'
},
opacity: {
'0': '0',
'25': '.25',
'50': '.5',
'75': '.75',
'10': '.1',
'20': '.2',
'30': '.3',
'40': '.4',
'50': '.5',
'60': '.6',
'70': '.7',
'80': '.8',
'90': '.9',
'100': '1',
},
zIndex: {
'-1' : -1,
'0': 0,
'10': 10,
'20': 20,
'30': 30,
'40': 40,
'50': 50,
'25': 25,
'50': 50,
'75': 75,
'100': 100,
'auto': 'auto',
},
inset: (theme, { negative }) => ({
auto: 'auto',
...theme('spacing'),
...negative(theme('spacing')),
'1/2': '50%',
'1/3': '33.333333%',
'2/3': '66.666667%',
'1/4': '25%',
'2/4': '50%',
'3/4': '75%',
full: '100%',
'-1/2': '-50%',
'-1/3': '-33.333333%',
'-2/3': '-66.666667%',
'-1/4': '-25%',
'-2/4': '-50%',
'-3/4': '-75%',
'-full': '-100%',
}),
colors: {
white:'#ffffff',
gray: {
100: "#D2D2D2",
200: "#BCBCBC",
300: "#A5A5A5",
400: "#8F8F8F",
500: "#797979",
600: "#626262",
700: "#4C4C4C",
800: "#353535",
900: "#1F1F1F",
},
orange: {
100: "#FFDFCC",
200: "#FFCFB3",
300: "#FFBF99",
400: "#FFB080",
500: "#FFA066",
600: "#FF904D",
700: "#FF8033",
800: "#FF701A",
900: "#FF6000",
},
},
rotate:{
'-180': '-180deg',
'-90': '-90deg',
'-45': '-45deg',
'0': '0',
'45': '45deg',
'90': '90deg',
'135': '135deg',
'180': '180deg',
'270': '270deg',
'360': '360deg'
},
borderWidth: {
DEFAULT: '1px',
'0': '0',
'2': '2px',
'3': '3px',
'4': '4px',
'6': '6px',
'8': '8px',
'10': '10px',
'12': '12px',
'14': '14px',
'16': '16px'
},
extend: {
height:{
'5.5/6': '91.6667%'
},
fontFamily: {
sans: ['Arial', ...defaultTheme.fontFamily.sans],
},
transitionDuration: {
'2000': '2000ms',
'3000' : '3000ms',
},
transitionProperty: {
'top': 'top',
'left': 'left',
},
lineHeight:{
12 : '3rem',
13: '3.25rem',
14: '3.5rem'
},
},
},
variants: (theme) => ({
...theme('variants'),
padding: ['first','last'],
margin: ['first','last'],
backgroundColor: ['first'],
textColor: ['first'],
outline: ['active','focus'],
position: ['first','last'],
opacity: ['responsive', 'hover', 'focus', 'disabled'],
borderRadius: ['hover', 'focus'],
width:['group-hover']
}),
plugins: [
require('#tailwindcss/ui'),
],
};
Laravel Mix File
const mix = require('laravel-mix');
const atImport = require('postcss-import');
const tailwindcss = require('tailwindcss');
mix.browserSync('localhost:8000');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/admin.js','public/js')
.sass('resources/scss/app.scss', 'public/css')
.sass('resources/scss/admin.scss','public/css')
.options({
processCssUrls: false,
postCss: [
atImport(),
tailwindcss('./tailwind.config.js')
],
})
.webpackConfig(require('./webpack.config'));
I am not an expert in this but have used Tailwind CSS from pre V1. I notice that you are trying to use features from V2, (eg darkmode).
Several issues:
purge: [
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],
purge: [],
does the second purge: [ ] clear the first array?
My tailwind.config.js file does not have the first 2 lines ending with require('tailwindcss/defaultTheme');
I have no idea what these are referencing, but do you not have your source folders for js included in the purge list. Add this line to the purge list if your javascript adds classes
.resources/js/**/*.js
As for the webpack.mix.js file my last lines are
.options({
processCssUrls: false,
postCss: [ tailwindcss('./tailwind.config.js') ],
});
Sorry but I am not an expert