adamwathan
Repos
163
Followers
8585
Following
12

A utility-first CSS framework for rapid UI development.

61043
3050

Events

closed issue
Copy JSX button copies SVG

Hey,

I noticed the button Copy JSX does not copy the actual JSX element but copies the SVG element instead.

Cheers.

Created at 14 hours ago
issue comment
Copy JSX button copies SVG

Hey! It copies the SVG as JSX, which is the intended behavior. You’ll notice it’s using className, strokeWidth, etc, which are the changes needed to use the icon as inline JSX.

Created at 14 hours ago
Add prettier-plugin-tailwindcss to editor-setup

Thanks!

Created at 3 days ago

Update editor support page

Created at 3 days ago

Add prettier-plugin-tailwindcss to editor-setup (#1369)

  • add prettier-plugin-tailwindcss to editor-setup

  • Update editor-setup.mdx

Co-authored-by: Adam Wathan adam.wathan@gmail.com

Created at 3 days ago
pull request closed
Add prettier-plugin-tailwindcss to editor-setup

Added a section about the prettier-plugin-tailwindcss to the editor-setup page. Focused on keeping it short & concise and link to the repo and blog post for more details and instructions.

The reasoning behind adding this to the docs is based on the discussion here on Twitter: https://twitter.com/t3dotgg/status/1575334522056372225

Created at 3 days ago

Update editor-setup.mdx

Created at 3 days ago
bg-[url('')] doesn't work with external urls with PHP

Hey guys,

as the title says, I have a problem with bg-[url('')]. If you connect this variable with PHP to display an external image from the database, bg-[url('')] is not executed at all, but it works if you take PHP out again and leave it hardcoded which is not the point.

Tailwind version: 3.1.8

Framework: Laravel 9 w/ Vite

Node.js version 16.15.0

Tested on browsers: Chrome, Firefox & Safari

Operating System: macOS

Examples:

Hardcoded works

<div class="bg-[url('https://images.pexels.com/photos/12123082/pexels-photo-12123082.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load')] w-full h-full"></div>

Included PHP doesn't work

@php ($image = 'https://images.pexels.com/photos/12123082/pexels-photo-12123082.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load')
<div class="bg-[url('{{ $image }}')] w-full h-full"></div>

And it works as well, with style="background-image:url('')" but not class="bg-[url('')]"

Maybe one of you have the same issue like me or fixed it.

Created at 4 days ago
issue comment
bg-[url('')] doesn't work with external urls with PHP

Hey! See docs: https://tailwindcss.com/docs/content-configuration#dynamic-class-names

Created at 4 days ago
issue comment
Safelist classes doesn't cascade other classes that are not in safelist

Hey! This is intended behavior — when you add two classes that conflict like that the result is indeterministic. The order of the CSS is based on which classes Tailwind "sees" first, and anything in the safelist is seen before things in your HTML.

The order of classes in your HTML doesn't matter to the browser, only the order of the classes in your CSS.

For example, both of these divs are going to be green, doesn't matter what order the classes are in in your HTML:

<style>
  .bg-red {
    background: red
  }
  .bg-green {
    background: green
  }
</style>

<div class="bg-red bg-green"></div>
<div class="bg-green bg-red"></div>

https://jsfiddle.net/wg1yve54/

So the solution here is to only add the class you actually want to take effect 👍

Created at 5 days ago
Safelist classes doesn't cascade other classes that are not in safelist

What version of Tailwind CSS are you using? v3.1.8

What build tool (or framework if it abstracts the build tool) are you using?

"next": "^12.3.0",

devDep:
"postcss": "^8.4.16",
"sass": "^1.54.9",
"tailwindcss": "^3.1.8",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-middleware": "^5.3.3",
"webpack-dev-server": "^4.11.0"

What version of Node.js are you using?

lts/gallium -> v16.17.0

What browser are you using?

Chrome, Firefox

What operating system are you using?

Windows (but im running my nextjs on WSL Ubuntu 20)

Reproduction URL

https://codesandbox.io/s/winter-voice-v1qo6o?file=/src/App.js

Describe your issue I've found a problem in my current project, I decided to replicate the problem in codesandbox, as you can see once you safelist a class, it will not cascade classes that are not in safelist. In my current project, pretty much most of the classes came from the backend.

image image

Expected Result (note: I removed the class from the safelist) image

Created at 5 days ago

Update responsive-design.mdx

Created at 5 days ago
CssSyntaxError: postcss-import: xxxxx/xxx/variables.scss:1:4: Unknown word

Discussed in https://github.com/tailwindlabs/tailwindcss/discussions/9430

Originally posted by sshallow September 27, 2022 What version of Tailwind CSS are you using?

"tailwindcss": "^3.1.8"

What build tool (or framework if it abstracts the build tool) are you using?

{
  "name": "ruoyi",
  "scripts": {
    "dev": "vue-cli-service serve",
    "build:prod": "vue-cli-service build",
    "build:stage": "vue-cli-service build --mode staging",
    "preview": "node build/index.js --preview",
    "lint": "eslint --ext .js,.vue src"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,vue}": [
      "eslint --fix",
      "git add"
    ]
  },
  "keywords": [
    "vue",
    "admin",
    "dashboard",
    "element-ui",
    "boilerplate",
    "admin-template",
    "management-system"
  ],
  "repository": {
    "type": "git",
    "url": "https://gitee.com/y_project/RuoYi-Vue.git"
  },
  "dependencies": {
    "@riophae/vue-treeselect": "0.4.0",
    "axios": "0.24.0",
    "clipboard": "2.0.8",
    "core-js": "3.19.1",
    "echarts": "4.9.0",
    "element-ui": "2.15.6",
    "file-saver": "2.0.5",
    "fuse.js": "6.4.3",
    "highlight.js": "9.18.5",
    "js-beautify": "1.13.0",
    "js-cookie": "3.0.1",
    "jsencrypt": "3.2.1",
    "nprogress": "0.2.0",
    "quill": "1.3.7",
    "screenfull": "5.0.2",
    "sortablejs": "1.10.2",
    "vue": "2.6.12",
    "vue-count-to": "1.0.13",
    "vue-cropper": "0.5.5",
    "vue-meta": "2.4.0",
    "vue-router": "3.4.9",
    "vuedraggable": "2.24.3",
    "vuex": "3.6.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "4.4.6",
    "@vue/cli-plugin-eslint": "4.4.6",
    "@vue/cli-service": "4.4.6",
    "babel-eslint": "10.1.0",
    "babel-plugin-dynamic-import-node": "2.3.3",
    "chalk": "4.1.0",
    "compression-webpack-plugin": "5.0.2",
    "connect": "3.6.6",
    "eslint": "7.15.0",
    "eslint-plugin-vue": "7.2.0",
    "lint-staged": "10.5.3",
    "runjs": "4.4.2",
    "sass": "1.32.13",
    "sass-loader": "10.1.1",
    "script-ext-html-webpack-plugin": "2.1.5",
    "svg-sprite-loader": "5.1.1",
    "tailwindcss": "^3.1.8",
    "vue-template-compiler": "2.6.12"
  },
  "engines": {
    "node": ">=8.9",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,vue,ts}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

my index.css and variables.scss image image

What browser are you using?

Chrome

What operating system are you using?

macOS

Describe your issue

I got an error when I followed the steps on the official website to the fourth step.

 npx tailwindcss -i ./src/assets/styles/index.scss -o ./dist/output.css --watch
CssSyntaxError: postcss-import: /Users/smart/Desktop/公司项目/fuba-stock/ruoyi-ui/src/assets/styles/variables.scss:1:4: Unknown word

> 1 | // base color
    |    ^
  2 | $blue:#324157;
  3 | $light-blue:#3A71A8;

I'm confused why he scans other css files(variables.scss) for errors image

Created at 6 days ago
Fix indentation for consistency

Thanks!

Created at 6 days ago

Fix indentation for consistency (#1363)

Created at 6 days ago
pull request closed
Fix indentation for consistency
Created at 6 days ago
[WIP] React Native "style" support

Overview

This PR is a quick stab at expanding the JSX attributes to include style for use in React Native. The use-case behind this is TailwindCSS is great and this plugin automates another standard that we would otherwise have to debate at some point. But, it doesn't yet support react native.

Hoping you're open to the idea and thanks for the killer 💯 plugin 🔌

Created at 6 days ago
[WIP] React Native "style" support

Hey! I think we're going to hold off on this for now since we don't have a React Native library — if we ever actually support React Native then I think we can revisit 👍

Created at 6 days ago

Fix missing class selector typo (#1362)

  • Fix missing class selector typo

  • Update display.mdx

Co-authored-by: Adam Wathan adam.wathan@gmail.com

Created at 6 days ago
pull request closed
Fix missing class selector typo
Created at 6 days ago
Fix missing class selector typo

Thanks! Flipped the change the reverse direction but appreciate it regardless.

Created at 6 days ago

Update display.mdx

Created at 6 days ago
closed issue
Nextjs build error after update v1.0.6 to v2.0.11

Hello everybody

I updated the @heroicons/react to v2.

I also changed the importing path import { ArrowLeftIcon } from '@heroicons/react/24/solid'

But when I am running npm run build to build it, It shows the below error

Error occurred prerendering page "/admin-authenticated/user-warpner-link". Read more: https://nextjs.org/docs/messages/prerender-error
Error: You're trying to import `@heroicons/react/outline/FilmIcon` from Heroicons v1 but have installed Heroicons v2. Install `@heroicons/react@v1` to resolve this error.
    at Object.get ( ../..node_modules/@heroicons/react/outline/index.js:9:13)
    at AdminTopbarAndSidebarLayout (../.next/server/chunks/4695.js:58:73)
Created at 1 week ago
issue comment
Nextjs build error after update v1.0.6 to v2.0.11

Sounds like you still have some imports that haven’t been updated, that’s the only time we display that warning. If for whatever reason that’s not the issue, please open a new issue but include a reproduction so we can take a look at the code 👍🏻

Created at 1 week ago
The Syntax template is not working

Hey thanks for reporting! I can reproduce this when using pnpm instead of npm to install the dependencies and run the dev script. Will try to take a look at this this week and see if there's any reason we can't make it work with both package managers.

In the mean time though you should have no issues if you use npm instead 👍

Created at 1 week ago
Allow icon search to include dashes

Nice, thanks!

Created at 1 week ago

Allow icon search to include dashes

Merge pull request #139 from metonym/allow-dashes

Allow icon search to include dashes

Created at 1 week ago
pull request closed
Allow icon search to include dashes

Currently, searching an icon containing dashes by its exact name does not yield matches. An example is that the query user group does not match icon user-group.

Spaces should be treated as dashes so that it can match the exact icon names:

Created at 1 week ago