How to enable Official Tailwind Plugins while using astrojs/tailwind?
I have installed the typography plugin, restarted the server, and refreshed the browser. But I still have a small H1 heading.
npm install -D #tailwindcss/typography ➡
Then I've added require('#tailwindcss/typography') to my tailwind.config.js
My package.json is ...
"devDependencies": {
"#astrojs/tailwind": "^0.2.5",
"#tailwindcss/typography": "^0.5.4",
Yes, using #astro/tailwind with official tailwind plugins is possible.
My mistake was to use H1 tags without prose class.
I did not use a top div with prose class. After adding prose class it worked.
<div class="prose prose-slate mx-auto">
<h1>Your Header</h1>
</div>
Related
Question:
I'd like to use a plugin (daisyUI) for TailwindCSS in one of my Svelte components. It looks like style information leaks from this component and affects the entire site. How can I avoid this?
I don't think this is related to daisyUI specifically.
Below I'm describing a minimal reproducible example based on sveltekit. But the problem is not related to sveltekit. I'm encountering this in the development of a webextension which doesn't use sveltekit. The sveltekit setup is only to make the smallest possible demonstration for this question.
To illustrate the problem, I've set up a sveltekit skeleton project, then added one single additional svelte component which uses Tailwind. When I add the plugin, the background color of my page turns from white to gray. I don't understand how this can happen, as far as I can see, I'm only using Tailwind within that component. But the style seems to leak.
Minimal example on github:
Fastest way to reproduce:
git clone git#github.com:lhk/minimum_example.git
cd minimum_example
npm install
npm run dev -- -- open
Now you can edit tailwind.config.cjs and add/remove the plugin:
plugins: [
//require("daisyui")
],
Step-by-step explanation
I'd like to use Svelte together with Tailwind and DaisyUI.
Here's a minimal project setup
# choose the skeleton project, typescript syntax and no to everything else
npm create svelte#latest minimum_example
cd minimum_example
npm install
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init tailwind.config.cjs -p
npm i --save-dev daisyui
Now edit tailwind.config.cjs:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{html,js,svelte,ts}'], theme: {
extend: {},
},
plugins: [
//require("daisyui")
],
}
Add a new Svelte component under src/components/Problem.svelte:
<p class="bg-blue-700">Using Tailwind class</p>
<style lang="postcss">
#tailwind base;
#tailwind components;
#tailwind utilities;
</style>
And include it in src/routes/+page.svelte:
<script lang="ts">
import Problem from "./../components/Problem.svelte";
</script>
<h1>Welcome to SvelteKit</h1>
<p>Visit kit.svelte.dev to read the documentation</p>
<Problem></Problem>
You can run the project with
npm run dev -- -- open
If you open the website you'll see the sveltekit skeleton app, plus one paragraph with a blue background (this is my test that Tailwind is working). Now you can uncomment the plugin in tailwind.config.cjs. The background of the page will turn gray.
I think this is a theme that somehow leaks from the Tailwind plugin to the entire site.
The way you use tailwind with svelte is quite wrong. The tldr answer is remove #tailwind directives and use #apply instead.
<p class="my-element">Using Tailwind class</p>
<style lang="postcss">
.my-element {
#apply bg-blue-700;
}
</style>
The way how svelte scopes styles is by using a unique class name alongside your custom selector, e.g. .my-element becomes .my-element.svelte-x57u2q. This also means you must use a selector so that this scoping mechanism can kick in.
But with vanilla tailwind, those builtin class names have to be global in order to be useful, in other word “leaked”. This is by design, not bug.
So if you want to use tailwind but also leverage svelte’s scoped style, #apply is the only solution.
The official doc has a section titled Using #apply with per-component CSS that reveals more technical details, I think it’s worth reading.
I am trying to make a box with display:block to display: flex. So I used tailwind and marked it as important by using !. But it is not working. I am using svelte in my project.
my code looks like this
<div class="box !flex flex-col"></div>
to install tailwind I followed this tutorial
but it doesn't work
I am trying to use a Tailwindcss RTL plugin, which generates some classes starting with [dir=rtl] or [dir=ltr]. But due to Purge CSS is removing it regardless of it's use.
Here is how I solved this
Because pure CSS is dumb, it looks for the strings that match the content it needs to purge. So to fool it, we can simply add the classes or attributes which we want to be saved.
like this
<main class="[dir=rtl] [dir=ltr] container">
{some content}
</main>
I'm new to angular and was trying to implement something with W3 CSS. I was trying to add this css to my project. Below are the steps I have followed
Ran npm install --save w3-css in my project directory
Added node_modules/w3-css/w3.css in angular.json
"styles": [
"src/styles.css",
"node_modules/w3-css/w3.css"
],
After that I tried adding css classes to my component html file
<div class="w3-container w3-border w3-large">
<div class="w3-left-align"><p>Left aligned text.</p></div>
<div class="w3-right-align"><p>Right aligned text.</p></div>
</div>
But I couldn't see any class added.
Note: node_modules folder and angular json are in same directory.
import your css in style.css file.
#import "../node_modules/w3-css/w3.css";
I'm trying to use the foundation library in a ReactJs basic project. I installed the react-foundation and foundation-sites following this github project: https://github.com/digiaonline/react-foundation
Now the problem is i can't use the row class. Everywhere i go on the internet, in the foundation demos and documentation, i see the row class, but i have absolutely nothing for this clasd in my CSS. Instead of that, i have the grid-x, grid-y and other stuff. Is my foundation CSS incomplete?
Here's what i did exactly:
In my project i executed the commands npm install react-foundation --save and npm install foundation-sites --save. And in my index.js file i added this line import 'foundation-sites/dist/css/foundation.min.css';
In my app.js file, i have this code :
class App extends React.Component {
render() {
return (
<div class="row">
</div>
);
}
}
But when i inspect the div in Google Chrome, there's absolutely no CSS for the row class. When i use grid-x instead, i have some style.
What am i missing?
Thanks a lot
As stated react-foundation documentation, the CSS class .row no longer exists in new versions of the foundation-sites CSS. Therefore adding className="row", will not have any effect whatsoever:
Note: Newer versions of foundation-sites do not offer out of the box
support for and components. If working with a newer
version, and components should be used instead.
This can be confirmed by review the content of dist/foundation.css. Instead use components like Grid and/or Cell as specified in the documentation for react-foundation. Or you can obviously use classes grid-x that do exist in the foundation-sites CSS.
Also keep in mind, use className instead of class in React.