i know tailwindcss cli creates only the used class of the project in according with "content" options in tailwins.config.js.
but... is there a way to evitate this optimization (not considering content options and the written code) and let it creates ALL classes in according with the rest of configuration file???
I would like to create a styles lib by tailwind but not on a specific project. I would like create that lib in an angular library to share it then. Any ideas?
UPDATE: i found a command "tailwindcss-cli build -o <output.file>" that create all css from config. It create a very big file but i ma not so confident with it. I don't understand is tailwindcss-cli and tailwindcss are the same. I seems no in fact i can't have the same result using tailwindcss build bue if i call help on both cli i get the same.
thanks
If you are using Laravel, you have to run:
npx tailwindcss-cli build -o public/css/app.css
It will generate all styles (3MB file size). After finishing your application, you can run again:
npm run dev
to remove all unused styles, as it will take only used styles from your php code.
Related
I am trying to turn a html/css template to NExtJS App , the problem is that the app is multi-lang So i have two Css file one for Rtl and other for ltr So i do the folowing:
if(router.locale==='ar'){
require('../styles/Style.rtl.css')
}else{
require('../styles/Style.css')
}
the above Code work fine when I use npm run dev .... but When i use npm run build i got some Conflicts because the two Css file are using same classNames and Webpack combine the two file in one generated css file.
So is there any solution for this or other way to import Css file depending on the Current Lang
I have a vuetify project (Windows / VSCODE).
Our plan is to create components for our internal teams to use - no NPM.
I created a hello-world.vue component and ran a script (below) from package.json to create a dist folder with that component. This works fairly well, but in another application demo.html or such the Vuetify Button v-btn does not have any of the styling from vuetify... The script creates the individual components based off the vue file.
script executed to generate components "buildSFC": "cross-env vue-cli-service build --target wc --name jcdc-sfc 'src/components/*.vue'"
What am I missing to get VUETIFY styling and such?
See GIT HUB for code: https://github.com/wlafrance/jcdc-sfc
If you pull the git down, in a vue command line execute this script: npm run buildSFC
Then look for a dist folder in the project and open the html file in chrome to see the issue.
So see what it is suppose to look like (the button) execute: nmp run serve
Your publicPath in vue.config.js probably defaults to / which is you root drive. So if you have it running on Windows and on your C: drive then your demo.html will look in C:\ for the files.
Add a publicPath: "./" to your vue config.
Also check your package-json scripts. buildLib has a ./src/ but buildSFC does not.
I'm creating the initial setup of a proof of concept project using ReactJS and typescript, and I'd like to include the CSS modules in it without having to eject the webpack configuration.
Here are the steps I followed so far:
npm install -g create-react-app
create-react-app firstapp --scripts-version=react-scripts-ts
npm install react-app-rewired --save-dev
npm install --save-dev codebandits/react-app-rewire-css-modules sass-loader node-sass
package.json:
"start": "react-app-rewired start --scripts-version react-scripts-ts"
config-overrides.js:
const rewireCssModules = require('react-app-rewire-css-modules');
module.exports = function override(config, env){
config = rewireCssModules(config, env);
return config; }
I correctly set my App.module.scss file, and referenced it in my App.tsx file:
import styles from './App.module.scss';
When I run the project, I have an error regarding the css module:
Cannot find module './App.module.scss'.
When I do the exact same project without the typescript configuration, it works though.
What should I change for the CSS modules to be taken into account?
I came accross typings-for-css-modules-loader, but I'm not sure how to integrate it in my configuration since I didn't eject the webpack configuration.
Thanks in advance,
Thomas .T
EDIT 1:
I added a global.d.ts file with:
declare module '*.css'
declare module '*.scss'
And it did the trick. I didn't use typings-for-css-modules-loader in the end.
The answer comes from this article: https://hackernoon.com/zero-config-react-typescript-css-modules-jest-with-poi-bbcedfe2383a
I added a global.d.ts file with:
declare module '*.css'
declare module '*.scss'
And it did the trick. I didn't use typings-for-css-modules-loader in the end.
The answer comes from this article: https://hackernoon.com/zero-config-react-typescript-css-modules-jest-with-poi-bbcedfe2383a
Gonna accept this as an answer within 2 days.
I got the workaround after googling a lot. I'm new to react js and trying to build using typescript so I found the solution and started using
react-script-ts
package. But when I started using css module faced the problem import class from './button.css' didn't work so I used import './button.css' but in this got lot of css conflicts, higher component scope css always overridden by lower component. so googled a lot and finally got the solution.
Solution
From 2.1 create-react-app having support for typescript so convert your application to 2.1 above
1.create new application using `npx create-react-app my-new-app --typescript`
2. replace your old src folder in new solution
3. Rename all your css file with `*.module.css` and change the import based on that.
4. Add your package dependancy if anything missing
5. Run
source : https://joshblog.net/2018/upgrading-a-react-and-typescript-app-from-react-scripts-ts-to-create-react-app-v2-1/
I don't understand how to compile foundation with my own SASS additions.
I have my own Github repo with ZURB foundation 5, I've extended it (with SASS and JS) and changed some things.
Let's say my repo is here: github.com/some_name/my_foundation_version.
So, I download it from git
git clone git://github.com/some_name/my_foundation_versionbut then what?
I don't understand how to use bower or grunt in this case. How do I use my own git repo?
UPDATE:
Going into: ./foundation/scss and run sass foundation.scss:output.css doesn't work either
Method One - Self Compile using koala etc
If you just want to use the scss to compile yourself you need 2 repo's not one
First you want the Foundation Master Repo Then Secondly The Bower_components
Foundation Master
Bower-Foundation
Unpack the foundation master then in it create a directory called foundation and unpack the bower components into there.
I personally then use koala to compile the scss which is a simple drag and drop programme I click on the app.scss set the output path to app.css and away I go.
If you want a version to play here is a repo i'm playing with for a framework also has the icons set and a few other bits in there but you can simply download unzip and it should then compile
https://github.com/Relution-Design/legion-assets
I also use netbeans which is more or less the same process, make sure correct libs are installed in netbeans set output path and compile on save.
Method 2
Firstly Make sure that you have all the dependencies!! 3 months I spent and was missing one . . . . HEAD IN HANDS :( then follow the instructions
FOUNDATION SCSS
I'm already using bootstrap.css. But i would like to surcharge the less variables without using bootstrap customize editor.
I would like to add a less file in my project. My project is a simple nodejs project with express and harpejs.
Where to find the less file ? Using express it will compile it when i will deploy the project ?
Thanks.
Look at using bower.
npm install -g bower
bower install bootstrap
You will then find all the less files in bower_components/bootstrap/less/*. Copy the bootstrap.less file to your CSS directory and make alterations (make sure the paths are correct).
You can then look at using some Grunt tasks to get the less to build.