I'm using TailwindCSS, I want a separate stylesheet CSS file for each of my web pages. like
about.html - about.min.css
portfolio.html - portfolio.css
First you should ask yourself why do you want to do this? Creating a separate style-sheet for each individual page (home, about, etc) is not really common. The focus is on re-usability and possibly only adding additional styles.
If you are concerned about the file size, then do not integrate Tailwind via CDN but build your own style. Then you have access to the purge function. Purge kicks out all unused styles and the result is a very small CSS file.
You can use:
const mix = require('laravel-mix')
mix.postCss('input.css', 'output.css', [
require('tailwindcss')`enter code here`('./tailwind.config.js'),
require('autoprefixer')
])
.postCss('input.css', 'output-pdf.css', [
require('tailwindcss')('./tailwind-custom.config.js'),
require('autoprefixer')
])
You'll need to install TailwindCSS as PostCSS plugin as well as postcss-import and autoprefixer. Then create postcss.config.js in root directory and add:
module.exports = {
plugins: {
'postcss-import': {},
tailwindcss: {},
autoprefixer: {},
}
}
then you can add as many css files as needed in your css directory, albeit with some concerns following this documentation
Keep in mind, you should only use one css for all pages in your web unless you have multiple projects with different styling required.
If you want multiple CSS output , then you should not be using Tailwind for your project.
Related
I am putting Tailwind in an Angular project. I have what I think is the most standard configuration (default one, only changed the colors) :
tailwind.config.js
module.exports = {
content: [
join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
...createGlobPatternsForDependencies(__dirname),
],
theme: {
[...]
},
plugins: [],
}
Yet, I face problems when I use a CSS class for the first time. For example mt-10.
It seems that tailwind uses the glob pattern to detect the used css properties and create a CSS on the flight when the server starts. Is that correct ?
If I understand it correctly, it seems to make sense in order to avoid having a huge CSS file with tons of properties that are not used.
But it means that if I don't use this class at the moment I start the server, then it won't be available after a live reload. If I want to use a css class for the first time, it seems that I have to restart the server to have it detected before being able to use it, which is irritating.
Is it possible to deactivate this behavior in development ? It seems to me that it should be possible to build the huge CSS once for all in dev. Is there an option for that ?
I'm building out a custom WordPress theme with Tailwind and compiling assets with Laravel Mix 6.
In my tailwind.config.js file I have the following purge configuration:
purge: {
enabled: true,
content: [
'./assets/**/*.{.js|.scss}',
// './*.php',
// './*/*.php',
// './*/*/*.php',
],
safelist: [
// list any Tailwind classes which should never be purged, for example classes added via WordPress which are stored in the database
// 'classname',
],
},
Now, my first line works absolutely perfectly. It looks for any .scss or .js files inside my assets folder or subfolders and compiles on change. However if I uncomment any of the .php lines Laravel Mix constantly recompiles in the terminal even when I'm not making changes - it's completely endless.
I've narrowed the issue down to these lines, if they're not added it works fine, but I need them added so TailWind knows what classes are being used.
My webpack.mix.js for reference also:
const mix = require("laravel-mix");
mix.js("assets/js/main.js", "build/scripts.js")
.sass("assets/scss/main.scss", "build")
.sourceMaps()
.browserSync("wordpressthemedev.local")
.options({
processCssUrls: false,
postCss: [
require("postcss-import"),
require("tailwindcss"),
require("postcss-nested"),
require("autoprefixer"),
],
});
Additionally, if I do this:
purge: {
enabled: true,
content: [
'./assets/**/*.{.js|.scss}',
'./parts/**/*.php',
'./functions/**/*.php',
'./404.php',
'./footer.php',
'./functions.php',
'./header.php',
'./index.php',
'./page.php',
'./search.php',
'./single.php',
// './*/*/*.php',
],
safelist: [
// list any Tailwind classes which should never be purged, for example classes added via WordPress which are stored in the database
// 'classname',
],
},
Mix doesn't compile forever and does run fine, but I would rather avoid having to declare every PHP file at root level if possible
So, annoyingly there doesn't seem to be an easy way around this. As Myself and Amar highlighted, you can get around this if you explicitly set the names of the files within the purge array - but this isn't the most optimal solution especially if your implementation has a lot of files to check.
I did some extra digging, and if you're trying to use this with WordPress, I could really recommend starting with either Roots Sage or MountainBreeze on a Roots Bedrock installation.
I personally find Sage a little too bloated out with unnecessary functions for most of the sites I build, so I'm running with Bedrock & MountainBreeze - A really nice combo so far!
I'm trying to style my FullCalendar according to technique 2 as described in this documentation. It says I should use PostCSS with postcss-custom-properties and postcss-calc.
My project uses Parcel for bundling and not WebPack like FullCalendar do in their examples, but from my understanding, using PostCSS in Parcel should just be plug-and-play by including a postcss.config.js file, so I figured it shouldn't be a huge issue. Here's what that file looks like:
module.exports = {
plugins: [
require('autoprefixer')({
"grid": true
}),
require('postcss-custom-properties')({
preserve: false,
importFrom: [
'src/style/fullcalendar-vars.css'
]
}),
require('postcss-postcss-calc')
]
};
So I have a file src/style/fullcalendar-vars.css. For the purpose of testing, it looks like this:
:root {
--fc-button-bg-color: red;
}
But nothing changes. When I look in the dev tools, there are no CSS variables set. Did I miss something?
I don't know if I can give you more information, I can't share a Stackblitz or anything else afaik, because the proplem lies in the building process. But I can link to the github repository where I am right now so you can look in other files and see what can be wrong https://github.com/WestCoastJitterbugsOrg/Personalized-Calendar/tree/c7633401cb1bb50488e11d0d306cb11333961f2d
Thank you!
I think the issue was that I used scss for everything else. A much simpler solution was to change the file extension of fullcalendar-vars.css to scss and import it in main.scss. No hassle, everything works like a charm! Finally I can have my pretty bright red buttons ;)
I want to use materializecss in my chrome extension.
The extension adds some functionality to gmail. Unfortunately the materializecss seems to interfere with the gmail stylings. Is it possible to isolate the scope of the materialize css or to add a custom prefix to the classes?
I currently import the css in my manifest.json
"content_scripts": [
{
"matches": ["*://mail.google.com/*"],
"css": [
"vendor/materializecss/materialize.min.css"
],
...
Not without rewriting the whole framework (the scss files) or using scoped stlyes.
There is gulp-class-prefix plugin to prefix CSS classes. Here is the configuration file
var gulp = require('gulp'),
classPrefix = require('gulp-class-prefix');
gulp.task('prefix', function () {
return gulp.src('SOURCE_OF_CSS_FILE')
.pipe(classPrefix('YOUR_PREFIX'))
.pipe(gulp.dest('DESTINASTION_FOLDER'));
});
gulp.task('default', ['prefix']);
but this will only prefix only CSS file and will work only for the components that do not need JS inclusion. For dynamic components, you need to make changes in materiazecss.js file.
Update
I got this python script. This script is designed for bootstrap. But anyhow this works(70%-80%) for materializecss too. You just need to change the file name in the main function of it ie replace bootstrap with materializecss.
I'm using Bower to manage Bootstrap and would like to make some changes (colours, font size etc) to the default Bootstrap look and feel. Here's my workflow:
Edit bower_components/bootstrap/less/variables.less
Recompile bootstrap using grunt build
The problem is that I want to be able to upgrade bootstrap when a new version comes out and presumably I'll lose my changes to variables.less.
Is there a way I can keep my changes outside of bower_components and also avoid having bower_components in source control since it's 122MB?
you can create a variables-custom.less and import it into theme.less like this:
//
// Load core variables and mixins
// --------------------------------------------------
#import "variables.less";
//import custom-variables after variables so the values will override.
#import "custom-variables.less"; //only has variables that have changed.
#import "mixins.less";
IMO this is a little bit better than the first solution because you wont have to load two (almost) identical CSS files on the client.
I'm sorry I cant help you with what to to about Bower and your source control as I do not use Bower
Here's the solution which worked for me:
Use bower to install all UI packages e.g. bower install bootstrap chosen
Create a separate folder less which contains all the LESS modifications. This article was very helpful here.
Here's my less/styles.less file:
#import "../bower_components/bootstrap/less/bootstrap.less";
#import "../bower_components/bootstrap-chosen/bootstrap-chosen.less";
//My custom variables - overrides the bootstrap variables file
#import "variables-custom.less";
Use grunt to monitor changes within the less folder and compile them into .css
Here's my Gruntfile.js (thanks to this answer):
module.exports = function(grunt) {
grunt.initConfig({
less: {
development: {
options: {
paths: ["./less"],
yuicompress: true
},
files: {
"./static/css/styles.css": "./less/styles.less"
}
}
},
watch: {
files: "./less/*",
tasks: ["less"]
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
};
This is indeed the best customization method. You create a theme.less and pull in original Bootstrap files (which can get upgraded in the future) and in the same file you call your own custom overrides. Either you #import them from a custom file which is not in the Bower directory or you just write your custom rules in your theme.less itself. You'll find this technique explained in this tutorial as well.
With Grunt, custom setups can get tricky. But with Brunch it's a piece of cake (yes!) and all pretty much goes automatically. Your grandma could do it.
As for avoiding the inclusion of bower_components in source control: with Git it's easy. You just check-in your bower.json but make sure to add /bower_components to your .gitignore file.
You should just create your own style sheet, use both with your custom one listed secondly. That way you can make changes but not change bootstrap at all.
Also, when you update, you keep your style sheet the same.
This allows you to change bits and pieces of Bootstrap but not actually changing the file, you're overriding it.
To be clear, your second CSS file would be SIGNIFICANTLY smaller... Only putting things your needed to change in it.