tailwind-css - I tried to follow the instruction in building tailwindcss (output.css) but the generate css file is missing some classes - TagMerge
3I tried to follow the instruction in building tailwindcss (output.css) but the generate css file is missing some classesI tried to follow the instruction in building tailwindcss (output.css) but the generate css file is missing some classes

I tried to follow the instruction in building tailwindcss (output.css) but the generate css file is missing some classes

Asked 1 years ago
0
3 answers

It could be that that tailwind dont know which files he have to watch.

For Example. watch all html and js files inside ./src/ module.exports = { content: ["./src/**/*.{html,js}"],

Change the path so that all files of your project are included.

Source: link

0

Example:
w-6/12
w-7/12 <- does not exist
w-8/12
w-9/12
w-10/12
w-11/12 <- does not exist
w-12/12 <- does not exist
Versions
tailwindcss: 3.0.15
tailwindcss/aspect-ratio: 0.4.0
tailwindcss/forms: 0.4.0
tailwindcss/line-clamp: 0.3.1
tailwindcss/typography: 0.5.0
tailwind.config.js
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
    content: [
        './storage/framework/views/*.php',
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './resources/views/**/*.blade.php',
    ],

    prefix: 'tw-',

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
        backgroundColor: theme => ({
            ...theme('colors'),
            'header': '#ffffff',
            'main': '#f2f2f3',
            'content': '#ffffff'
        }),

        textColor: theme => ({
            ...theme('colors'),
            'main': '#333333'
        })
    },

    plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
}
webpack.mix.js
const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .postCss("resources/css/app.css", "public/css", [
        require("tailwindcss")])
    .sass('resources/sass/app.scss', 'public/css')
    .sourceMaps();
resources/css/app.css
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Source: link

0

Webpack config is as follows.
const webpackConfig = {
	mode: NODE_ENV,
	entry: {
		admin: './assets/js/dev/admin/index.js',
	},
	output: {
		filename: './assets/js/admin/[name]/index.js',
		path: __dirname,
		library: [ '[modulename]' ],
		libraryTarget: 'this',
	},
	externals,
	module: {
		rules: [
			{
				parser: {
					amd: false,
				},
			},
			{
				test: /\.(js|jsx)$/,
				exclude: /node_modules/,
				loaders: [ 'babel-loader' ],
			},
			{ test: /\.md$/, use: 'raw-loader' },
			{
				test: /\.s?css$/,
				use: [
					MiniCssExtractPlugin.loader,
					'css-loader',
					{
						loader: 'postcss-loader',
						options: { postcssOptions: postcssConfig },
					},
				],
			},
			{
				test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/,
				loader: 'url-loader',
			},
		],
	},
	resolve: {
		extensions: [ '*', '.js', '.jsx' ],
		alias: aliases,
	},
	plugins: [
		new CustomTemplatedPathPlugin( {
			modulename( outputPath, data ) {
				const entryName = get( data, [ 'chunk', 'name' ] );
				if ( entryName ) {
					return entryName.replace( /-([a-z])/g, ( match, letter ) =>
						letter.toUpperCase()
					);
				}
				return outputPath;
			},
		} ),
		new MiniCssExtractPlugin( {
			filename: './assets/css/[name]/style.css',
		} ),
	],
};
The Tailwind CSS config is:
const colors = require( 'tailwindcss/colors' );

module.exports = {
	important: '.asnp-app',
	prefix: 'asnp-',
	content: [
		'./assets/js/dev/**/*.{js,jsx,ts,tsx,vue,html}',
		'./assets/js/dev/**/*.jsx',
	],
	theme: {
		extend: {},
		colors: {
			transparent: 'transparent',
			current: 'currentColor',
			white: colors.white,
			black: colors.black,
			gray: colors.gray,
			rose: colors.rose,
			indigo: colors.indigo,
			green: colors.green,
			blue: colors.blue,
		},
	},
	plugins: [],
	corePlugins: {
		preflight: false,
	},
};
The postcss config is:
const autoprefixer = require( 'autoprefixer' );
const tailwindcss = require( 'tailwindcss' );

module.exports = {
	plugins: [
		require( 'postcss-import' ),
		require( 'tailwindcss/nesting' ),
		tailwindcss,
		autoprefixer,
	],
};
The package.json script is:
"scripts": {
		"prepack": "npm install && npm run lint && npm run test && npm run build",
		"build": "cross-env BABEL_ENV=production NODE_ENV=production webpack",
		"start": "cross-env NODE_ENV=development TAILWIND_MODE=watch BABEL_ENV=development webpack --mode development --watch --info-verbosity none",
		"lint": "npm run lint:php && npm run lint:css && npm run lint:js",
		"lint:php": "composer run-script phpcs .",
		"lint:css": "stylelint assets/css",
		"lint:js": "eslint assets/js --ext=js,jsx"
	},
React element code:
export default function Settings() {
	const [ settings, setSettings ] = useState( {
		name: 'Name',
	} );

	const updateSettings = ( field, value ) => {
		let update = Object.assign( {}, settings, { [ field ]: value } );
		setSettings( update );
	};

	return (
		<div className="asnp-mt-4 asnp-max-w-lg asnp-grid asnp-grid-cols-1 asnp-gap-6">
			<label className="asnp-block asnp-space-y-1">
				<span className="asnp-field-title">
					{ __( 'Name', 'easy-woocommerce-discounts' ) }
				</span>
				<input
					type="text"
					className="asnp-block asnp-text-field"
					value={ settings.name }
					onChange={ ( e ) =>
						updateSettings( 'name', e.target.value )
					}
				/>
			</label>
			<div className="asnp-flex">
				<div className="asnp-w-1/2 asnp-bg-rose-500">w-1/2</div>
				<div className="asnp-w-1/2 asnp-bg-indigo-500">w-1/2</div>
			</div>
			<div className="asnp-flex">
				<div className="asnp-w-1/2 asnp-h-10 asnp-bg-gray-500">
					w-1/2
				</div>
				<div className="asnp-w-1/2 asnp-h-10 asnp-bg-blue-500 asnp-text-white">
					w-1/2
				</div>
			</div>
		</div>
	);
}

Source: link

Recent Questions on tailwind-css

    Programming Languages